Wsrtjtyk

I have this function to fetch the user data such in the code below.

constructor(props){

    super(props);

    this.state = { 

        user_id: this.props.navigation.state.params.user_id, 

        user: null 

    }

}



componentWillMount(){

    this.loadUserDetail()

}



loadUserDetail(){

    AccountController.loadUserDetail(this.state.user_id).then(data=>{

        if(data.status == true){

            this.setState({ user: data.user })

        }

    })

}

From the loadUserDetail() function, I set the user data in a state and the this.state.user result is as follow :

{ company_name: 'Universal Sdn Bhd', address: 'test', company_desc: 'test' }

So I'm trying to display these data in my render() by directly specifying the object like this.state.user.company_name but it doesn't work.

Here is how my rendering looked like :

render() {

    return (

        <View style={{flex: 1}}>

            <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{ this.state.user.company_name }</Text>

        </View>

    )

}

By displaying the data like in the code, it throws me this error

TypeError: null is not an object (evaluating 'this.state.user.company_name')

I'm able to display the data if I store every specific value in a state after fetching the data in the loadUserDetail() function but if let say I have a lot of data in my array then I have to set every each of them in a state and I want to avoid doing so.

Your render needs to allow for the fact that it can be called when this.state.user is null and show an appropriate display for that case, since your component will not have the user until/unless the asynchronous operation completes. For instance:

render() {

    const { user } = this.state;

    return (

        <View style={{flex: 1}}>

            {user

            ?  <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{ user.company_name }</Text>

            :  <Text style={{ fontSize: 20, fontStyle: 'italic' }}>loading</Text>

            }

        </View>

    )

}

If you don't want your component to show a pending state for when it doesn't have user, the call to load the user should be in the parent component instead, and it should only render the child when the user is known (passing it as props).

Side note: Inline style is generally a maintenance hassle. Consider using classes instead.

Side note 2: Presumably, loadUserDetail can fail. You should have a catch handler on it to deal with the failure.