在父组件的状态更改时重新渲染子组件

Question

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

流程： 屏幕 A（传递数据）-> 屏幕 B ->（更新并传回数据）屏幕 A。

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

我检查了数据是否正确传递，并且我确信主屏幕中子组件正在使用的状态正在更新。我只是想不通为什么在读取 state 的新值后子组件没有重新渲染？

主屏幕：

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'})
            }
         }

包含您的其余代码。

学习反应lifecycle methods。

Answer 2

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

我想这就是我一开始如此困惑的原因，因为在状态变化时重新渲染是 React 工作的核心。我使用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，或者切换到 hooks（这是最好的选择！）