score:1
in your reducer just change const initialstate = { data: [], user: null }
to const initialstate = { data: [], user: {} };
by making the intial state of user an empty object you can avoid any issues with this.props.user['property']
causing a cannot read property of undefined error.
furthermore you should probably show something else if initially user is an empty object. if you are doing an ajax request to get the user info then think about maybe doing a loading component. you would just need to add a new state to your reducer like so:
const initialstate = { data: [], user: {}, loading: true };
and then once you get the user info back, assuming thats from login user, you can have the reducer set loading: false
also you should either be using object.assign or the ...
operator to avoid mutating the original state. see http://redux.js.org/docs/recipes/usingobjectspreadoperator.html. updates so your reducers would look like this
const userreducer = (state = initialstate, action) => {
switch (action.type) {
case add_user :
return {
...state,
data: [action.user, ...state.data],
};
case update_user :
return {
...state,
user: action.user,
};
case login_user: {
const user = (action.response.statuscode === 200) ? action.response.user : null;
console.log(user);
return {
...state,
user,
loading: false
};
}
default:
return state;
}
};
and then in your userdashboard component
class userdashboardpage extends component {
render() {
console.log("userdashboardpage")
console.log(this.props.users)
const content = this.props.loading ? '....loading' : <userinfocomponent user={this.props.users} />;
return (
<div>
{content}
</div>
);
}
}
this will make sure it shows loading and then once the user loads it will show the users information.
score:0
is it possible that you wanted to render one userinfocomponent
for each entry in the users
property.
if users
is an array of user
objects you might want to do
{ users.map((user) => (<userinfocomponent user={user} />) }
otherwise, either provide an empty object as default value for users
(by using defaultprops
) or check for existence of a users
value in your mapstatetoprops
function.
Source: stackoverflow.com
Related Query
- React print this.props only when value is not null
- React JS props not working .. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
- Render only when Context variable is not null REACT
- How is this react controlled component input's value updated when no props are passed
- Make React only return after value is not null
- React only saves input value state on typing but not when filled by API data
- React with Semantic TextArea not updating value when props updated
- React useEffect Hook when only one of the effect's deps changes, but not the others
- React shouldComponentUpdate() is called even when props or state for that component did not change
- TypeError: Class extends value undefined is not a constructor or null in react js
- React memo keeps rendering when props have not changed
- Props not updating when redux state change in React Hooks
- Component not updating when I change the props that I pass to it in React
- Why is React component rerendering when props has not changed?
- React ref.current is null in componentDidMount only in Enzyme test, NOT null in real time
- React component not rerendering when props changes
- Why react calls function in subcomponents event when this subsomponents not rendered?
- why is mouseup event not firing when releasing outside div in this react code (using window.addEventListener)
- This expression is not callable when destructuring an array of React hooks in TypeScript
- react - force componentDidUpdate() when props are same value
- React child component not rendering props from parent value
- this keyword value when using React event handlers
- React component props not changing when they should?
- React Bootstrap - how to animate ProgressBar when value is increasing but not when resetting to 0%?
- When Using Redux Saga with React Get This Error .. Uncaught TypeError: getPosts is not a function
- when i increment the counter it increases by 2 not one. i am using react context for this
- Why does React re-renders children when props does not change?
- React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?
- Why React component get re-rendered only once when state does not change?
- How come props doesn't show when I try to print in react
More Query from same tag
- React error in console - Maximum update depth exceeded when input length is more than 5
- verifying state and input react issue
- Access a specific route in the Client with react router
- react-query - How can I access my queries in multiple components?
- How to set state value in each in each input field via get method
- How to concatenate props
- React Cannot read properties of undefined (reading, 'setState') on trigger from passed prop
- Antd Notification appearing twice?
- React TypeError: Cannot read properties of undefined (reading 'name')
- generate dates and add new property to array of object
- Make animate execute again after svg path changes
- Pass props React Router
- How to set min-content for a column in tailwind CSS Grid?
- Access promise resolve in on click handler in React
- How to make a button go to a link from an array in React?
- Tell typescript its ok that key is not in object, I expect it to be undefined or the value
- ERROR in ./node_modules/@esri/calcite-components/dist/custom-elements/index.mjs 1:0-147
- How to call a method after successfully storing data in state in react
- Customize ChartJS Hover Data Format
- Unable to Update State ReduxToolkit
- cant update quantity of a product in a shopping cart using react-redux
- Component should be returning a JSX.Element, but says it is not returning a value at all
- react-vis: How to format ISO dates
- React - Are all state properties required to be returned by getDerivedStateFromProps?
- Pass the data from child functional component to parent class component
- What is client side and server side in Next.js?
- Adding Tags to Coordinates of Images with Correct Position, Using React and Next.js
- React Hook "useState" is called in function that is neither a React function | Typescript
- React Swiper JS Controller
- Objects are not valid as a React child (found: object with keys {children}): ReactJS