反応小道具が状態を更新していない

Question

問題は、状態が未定義であるということです。 nextProps.useridの最初のコンソールログには正しいユーザーIDが表示されていますが、状態は変更されておらず、2番目のコンソールログはnullに戻ります。

class Profile extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     user: this.props.userid, 
    }; 
    } 

    componentWillReceiveProps(nextProps){ 
    console.log('PROFILE USERID', nextProps.userid) 
    const userid = nextProps.userid 
    this.setState({user:userid}) 
    console.log('PROFILE USERID 2', this.state.user) 
    } 

Answer 1

setStateは非同期です。したがって、setStateの直後に状態の値を変更することは期待できません。 setStateの直後にあなたの状態を記録すると、以前の状態が表示されます。更新された状態の値を確認したい場合は、このようなsetStateにコールバックを渡してみてください。

this.setState({user:userid},() => { 
    console.log('PROFILE USERID 2', this.state.user) 
});