CODEWITHSUNDEEP
react-nativereact-redux
Ryne
Ryne

Reputation: 1415

Undefined props only in componentDidMount

In my code below you can see my component. How it is written will cause the app to crash with the error:

undefined is not an object (evaluation this.props.data.ID)

So in my componentDidMount that id variable is not receiving the props data.

However if i comment out that code in the componentDidMount the app will load fine and the props.data.ID will print out in View. Is there a reason why i can't access the props.data.ID in my componentDidMount?

Heres my code

// timeline.js
class TimelineScreen extends Component {

    constructor(props) {
        super(props);

        this.state = {
            posts: []
        }

    }

    componentDidMount() {
        const { id } = this.props.data.ID;

        axios.post('/api/hometimeline', { id })
        .then(res => {
            this.setState({
                posts: res.data
            });
        });
    }

    render() {
        const { data } = this.props;
        return (
            <View style={s.container}>

              {
                data
                ?
                <Text>{data.ID}</Text>
                :
                null
              }

            </View>
        );
    }
}

function mapStateToProps(state) {
    const { data } = state.user;
    return {
        data
    }
}

const connectedTimelineScreen = connect(mapStateToProps)(TimelineScreen);

export default connectedTimelineScreen;

Upvotes: 0

Views: 1444

Answers (2)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

componentDidMount() {
    console.log(this.props.data); // for test

    const id = this.props.data.ID;
    //OR
    const {id} = this.props.data;

    ...
}

Upvotes: 0

Xuezheng Ma
Xuezheng Ma

Reputation: 377

The input of mapStateToProps is not react state, it is redux store. You shouldn't use this.setState in componentDidMount. Use redux actions and reducers to change redux store. Whenever redux store changes, it will invoke mapStateToProps and update your props

Upvotes: 1

Related Questions