重新渲染子组件的状态变化的子组件

Question

我正在使用 react-navigation在两个屏幕之间导航，同时传递它们之间的数据。

流动：屏幕a（传递数据） ->屏幕b->（更新＆amp;将数据回传）屏幕a。

在屏幕A中，我正在使用一个子组件，该组件需要在从屏幕b的接收到数据时进行更新/重新渲染。

我已经检查了数据是否正确传递，我很肯定，主屏幕中儿童组件正在使用的状态正在更新。我只是不知道为什么在阅读了状态的新价值之后，孩子组件为什么不重新订阅？

主屏幕：

updateCount(data) {
    // Logic to update state of a counter variable
    this.setState({ count: data })
}
// and then later on in the code, I'm calling the child Component 'B'        
<B prop={this.state.count} />

组件B：

componentWillMount() {
// based on value of this.props.count, I'm setting the value of 'text' in this component
    if(this.props.count == 1) {
       this.setState({text: 'abc'})
    } else {
       this.setState({text: 'cde'})
    }
}
// later on in the code, render method:
<View>
   <Text>
     {this.state.text}
   </Text>
</View>

Answer 1

更新组件B：（下面代码）

    constructor(props) {
            super(props);
            this.state = {
                count: props.count
            };
         }
        componentWillReceiveProps(nextProps) {
           if (nextProps.count != this.props.count){
                this.setState({
                count: nextProps.count
            })
          }
        }
       componentDidMount() {
             this.setTextValue();
       }
         componentWillUpdate() {
             this.setTextValue();
       }
         setTextValue = () => {
           if(this.state.count == 1) {
               this.setState({text: 'abc'})
           } else {
              this.setState({text: 'cde'})
            }
         }

包括您的其余代码。

研究React lifecycle methods好。

Answer 2

回答我的问题，因为我意识到我没有更新组件代码中的道具值以反映父元素的状态。

我想这就是为什么我首先感到困惑的原因，因为重新渲染状态是反应起作用的核心。我使用react-devtools调试并找出孩子组件的生命周期。现在一切都起作用了！不确定我是否需要挂钩/其他生命周期方法来实现此简单功能，但我感谢大家的帮助！

Answer 3

您必须对此使用componentDidupdate。但是，如果使用钩子，它将淘汰componentDidmount和componentDidupdate。对于您的基于课堂的示例，这可能是类似的。

    componentdidUpdate(prevProps, props) => {
      if(prevProps.count !== this.props.count){
    if(this.props.count == 1) {
      this.setState({text: 'abc'})
       }
        else {
     this.setState({text: 'cde'})
      }}

但是，根据文档，这些方法被视为遗产，您应该在新代码中避免它们：

unsafe_componentwillmount（）

将其删除支持componentdidmount和componentDidupdate，或切换到钩子（这是最好的选择！）