score:1
Accepted answer
since setdata
is the asynchronous method, you can't get the updated value of data
immediatley after setdata
.
const card = ({ cardref }) => {
const [data, setdata] = usestate({});
useeffect(() => {
setdata({ ...cardref });
console.log(data.main.temp); // data is still the old value which is initial empty {} value, so `data.main` is undefined and `data.main.temp` will be error.
}, [cardref]);
you should get it inside useeffect with adding a data
dependency.
useeffect(() => {
if (data.main) { // make sure that you need to check if `data.main` is not undefined before referring `data.main.temp`.
console.log(data.main.temp);
}
}, [data]);
Source: stackoverflow.com
Related Query
- TypeError when using React: Cannot read property 'firstChild' of undefined
- TypeError Cannot read property 'price' of undefined
- Gatsby TypeError - Cannot read property 'id' of undefined
- TypeError cannot read property url of undefined on strapi
- React-Redux mapStateToProps TypeError Cannot read property '' of undefined
- TypeError Cannot read property 'find' of undefined
- React Facebook Login with Enzyme mount - TypeError cannot read property 'parentNode' of undefined
- TypeError Cannot read property 'baseTheme' of undefined
- React : TypeError : Cannot read property 'fullname' of undefined
- React js and apexcharts Unhandled Rejection TypeError Cannot read property 'length' of undefined
- React - uncaught TypeError: Cannot read property 'setState' of undefined
- Line 0: Parsing error: Cannot read property 'map' of undefined
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- Error : Cannot read property 'map' of undefined
- React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
- Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
- React enzyme testing, Cannot read property 'have' of undefined
- Cannot read property 'history' of undefined (useHistory hook of React Router 5)
- React - TypeError: Cannot read property 'props' of undefined
- React-Router - Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined
- Redux TypeError: Cannot read property 'apply' of undefined
- React Router: Cannot read property 'pathname' of undefined
- React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined
- reactjs Cannot read property 'keys' of undefined
- TypeError: Cannot read property 'contextTypes' of undefined
- TypeError: Cannot read property 'prepareStyles' of undefined
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Cannot read property ‘params’ of undefined (React Router 4)
- Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js
- React Tutorial: TypeError: Cannot read property 'props' of undefined
More Query from same tag
- React Object Entries Renders Nothing
- How do I define the security rules where only logged in user can read and write all of the collections and subcollection?
- How to mock a constructor used in React componentWillUnmount
- BrowserRouter redirect not rendering component
- Functions are not valid as a React child. Conditional Rendering through Constant and not function
- For Loop doesn't render components probably
- Selecting value from NavDropDown Item in Reactjs
- How can I dynamically change the value of a CSS property in React?
- How to disable go back button in Browser
- How to map a JSON array to a List in ReactJS?
- Validating Form Fields on button click in office fabric Ui control
- Typescript interface for array object
- Construct POST Json in React If Form Is Populated
- ReactJS - Can inline style take state/props as full style string?
- How to send some parameter(dynamic path) from mapDispatchToProps to the watcherSaga/workingSaga (middleware)?
- Typescript/React: How can a ref be added to a material-ui Box component?
- ReactJS convert HTML string to JSX
- How can I make this work with less code and more efficiently? - Mapping Json and rendering components conditionally
- Jest unit test - mock value of async function within async function
- React-Bootstrap TypeScript - How to create a ImageButton
- React - changing state not updating elements rendered from variable
- Fetch is Undefined in Component when Mocking API Error Response with Jest
- React Bootstrap collapsible navbar not working
- StripeCheckout - How to pass Additional data to handleToken function?
- ReactJS: Logged in with Google, but callback not coming to application
- Redirecting From Middleware In Laravel Is Not Working As Expected
- meteor How to use upsert | Exception while simulating the effect of invoking ” TypeError: Cannot read properties of undefined (reading ‘_id’) react.js
- React-router : render is not a function
- React-Redux: Dispatching on Constructor -> props.store.state not updated
- Run Create-React-App Tests not in Watch Mode