reactjsで新しい値を再レンダーする方法は？

Question

this.state={ 
    value: 'v1', 
    newValue: '', 
} 

componentDidMount =() => { 
    let nV = this.state.value + 'received'; 
    this.setState({ 
    newValue: nV, 
    }); 
} 

tabClick = (val) => { 
    this.setState({ 
    value: val, 
    }); 
} 

render() { 
    return (
    <Tabs onTabClick={this.tabClick}> 
     <Tab val='v2'> 
     {this.state.newValue} 
     </Tab> 
     <Tab val='v3'> 
     {this.state.newValue} 
     </Tab> 
    </Tabs> 
) 
} 

これは私が直面している問題のシナリオ例です。プログラムが最初に読み込まれると、アクティブなタブv1 receivedに表示されます。私が別のタブをクリックすると、私はvalueの状態値を変更し、componentDidMountを予期して起動し、各タブの値を変更するnewValueを変更します。しかし、タブをクリックしても何も起こりません。ヘルプは非常に高く評価されるだろう:)

Answer 1

このよう

this.state={ 
    value: 'v1', 
    newValue: 'v1 received', 
} 

tabClick = (val) => { 
     let nV = val + 'received'; 

     this.setState({ 
     value: val, 
     newValue: nV 
     }); 
    } 

Answer 2

それをしないのはなぜあなたがcomponentWillMount（）関数の代わりにcomponentDidMount（）内の任意の状態を設定する必要があります。

以前のライフサイクル機能は、マウントが行われる直前に呼び出されます。 render（）の前に呼び出されるため、ここで状態を変更するのが理想的です。

後者は、リモートエンドポイントからデータをロードするために機能を呼び出す必要がある場合に最も適しています。 componentDidMount（）はrender関数の後に呼び出され、この関数で状態が変更された場合、render（）関数が再度呼び出されます。

参考： https://facebook.github.io/react/docs/react-component.html#componentwillmount https://facebook.github.io/react/docs/react-component.html#componentdidmount