-1

I get an error TypeError: Cannot read property 'length' of undefined when trying to access length of an array inside of an object that I get from mapstatetoprops... In my actions folder, i created a function getuserdata that makes an api call and successfully returns an object. in my component i call this.props.getuserdata in componentdidMount, and i mapstatetoprops currentUser state with getUserdata... although tt returns an object, it does not allow me to access the length of one of the properties arrays.... my mapstatetoprops writes:

currentUser: state.currentUser.getUserData

components folder


    class Users extends Component {

  componentDidMount() {
    this.props.getUserData();
    this.props.getOtherUsers();
   }

  render() {
      console.log(this.props.currentUser.myStocks.length,'current user')
      
      return (
      <Container>
      
      </Container>
    )
  }
};
function mapStateToProps(state) {
  return {
   currentUser: state.currentUser.getUserData, 
    filteredUsers: state.filteredUsers.getOtherUsers,
    getUsersError: state.users.getUsersError
  };
}

export default compose(
  connect(mapStateToProps, { getUserData, getOtherUsers }),
  requireAuth
)(Users);

actions folder:


    export const getUserData = () => async (dispatch) => {
   try {
    const { data } = await axios.get('/api/user/profile', {
      headers: { authorization: localStorage.getItem('token') },
    });
    // console.log(data.myStocks[0],'inform')
    dispatch({ type: GET_USER_DATA, payload: data });
  } catch (e) {
    dispatch({
      type: GET_USER_DATA_ERROR,
      serverError: e,
      clientError: 'Something went wrong please refresh try again',
    });
  }
}
F Alem
  • 11
  • 5
  • Does "this.props.getUserData" modify "this.props.currentUser" in any way via state change? Because it looks like you are passing currentUser as a function, not an array. What does console logging current user give you? – James Hamann Nov 28 '20 at 03:32
  • I am getting a console of an object with the current users properties – F Alem Nov 28 '20 at 03:51
  • Well you didn't post any usefull code, like the one where the `.length` occured or the structure of the data sent by the api. But you can debug it very easyly by putting `console.log(apiAnswer)` then `console.log(apiAnswer.theArray);` and so on... then you will see your error. – farvilain Nov 28 '20 at 04:03
  • Gotcha well if the myStocks property is not on that list then it isn't being returned by the API or if the request is an AJAX request then maybe you are accessing the property before it has been initialized. My guess. – James Hamann Nov 28 '20 at 04:05

1 Answers1

1

If this.props.currentUser is supposed to be obtained by this.props.getUserData() maybe the problem is that you API call is not finish while react use the render method.

farvilain
  • 2,552
  • 2
  • 13
  • 24
  • right. i access getUserdata api data in my mapstatetoprops. currentUser: state.currentUser.getUserData, – F Alem Nov 28 '20 at 04:40