ReactネイティブsetStateがcomponentDidMountで機能しない

Question

setSateにcomponentDidMount()を入力しようとしていますが、状態が変更されていません。私は以下のように状態を宣言：

constructor(props) { 
    super(props); 
    this.state = { 
     links: [], 
     personalInfo: { 
     name: "", 
     phone: "", 
     email: "", 
     address: { 
      city: "", 
      state: "", 
      country: "", 
     }, 
     }, 

     statement: "", 
     editMode: false, 
     superEditMode: false, 
    } 
    } 

そして、私のcomponentDidMountは以下の通りである：予想通りthis.state.personalInfothis.state.addressthis.state.statementがpropsから新しい状態に設定されていることを非常に奇妙である

componentDidMount() { 
    if (this.props.data) { 
     this.props.data.personalInfo ? this.setState({personalInfo: this.props.data.personalInfo}) : null 
     this.props.data.address ? this.setState({address: this.props.data.address}) : null 

     //this.props.data.links ? this.setState({links: this.props.data.links}) : null 
     //console.log((this.props.data.links ? true : false)); 
     this.setState({links: [ 
     { 
      linkType: "Portfolio", 
      linkAddress: "www.johndoe.com", 
     }, 
     { 
      linkType: "Github", 
      linkAddress: "https://github.com/johndoe", 
     }, 
     { 
      linkType: "LinkedIn", 
      linkAddress: "https://linkedin.com/johndoe", 
     }, 
     ]}); 
     console.log(this.state.links); 
     this.props.data.statement ? this.setState({statement: this.props.data.statement}) : null 
    } 

が、this.state.links初期状態である。

Answer 1

状態を変更してsetStateを呼び出すたびに、強制的に再レン​​ダリングが行われます。したがって、私がお勧めする最初のことは、コードをリファクタリングしてsetStateを1回だけ呼び出すことです。

console.log(this.state.links)にまだ空の配列が表示されているためリンク状態が変更されていないと思われる場合は、これはおそらく、行が実行されるときに状態がまだ更新されていないためです。 setStateは非同期です。試してみてください...

if (this.props.data) { 
    const { personalInfo, address, links, statement } = this.props.data; 
    this.setState({ 
     personalInfo: personalInfo || null, 
     address: address || null, 
     links: links || null, 
     statement: statement || null, 
    },() => { 
     const { personalInfo, address, links, statement } = this.state; 
     console.log({ personalInfo, address, links, statement }); 
    }) 
}