小道具からの反応コンポーネントの状態を設定し、小道具が変更されたときに更新しますか？

Question

My Reactコンポーネントは、propsに基づいてuserInGroupという状態プロパティを設定します。

this.state = { 
     userInGroup: this.props.user 
      ? this.props.user.groups.includes(props.group._id) 
      : false, 
    }; 

これは動作しますが、プロンプトが変更され、userInGroupの値も変更されてページが更新されるまで更新されません。このアップデートを反応的にするにはどうすればよいですか？

多分私はcomponentWillUpdateまたはcomponentDidUpdateを使うことができましたが、idはuserInGroupで使用されているロジックを繰り返すことでしょう。この繰り返しは避けられないのでしょうか？小道具は、実装部品が新しい小道具や親を受け取る前にconstructor/componentDidMountは一度だけのコンポーネントマウントは、とcomponentWillReceiveProps()が呼び出されたときに呼ばれているので、変更したときに状態を更新したいとき

Answer 1

はい、あなたは、constructor/componentDidMountとともにcomponentWillReceivePropsを利用するために必要コンポーネントのアップデート

あなたはロジック

this.state = { 
     userInGroup: this.getUserStatus(); 
    }; 

componentWillReceiveProps(nextProps) { 
    if(nextProps.user !== this.props.user) { 
     this.setState({userInGroup: this.getUserStatus(nextProps)}) 
    } 
} 
getUserStatus = (newProps) => { 
    const data = newProps || this.props 
    return data.user 
      ? data.user.groups.includes(data.group._id) 
      : false 
}