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

我使用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>

---

您必须将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'})
      }}

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

不安全的组件将安装

---

放弃它，选择componentDidMount和componentDidUpdate，或者切换到hooks，这是最好的选择

您必须使用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'})
      }}

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

不安全的组件将安装

放弃它，选择componentDidMount和componentDidUpdate，或者切换到hooks，这是最好的选择

更新组件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'})
            }
         }

包括其余的代码

好好研究生命周期方法。

更新组件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'})
            }
         }

包括其余的代码

---

研究生命周期方法。回答我的问题，因为我意识到我没有更新组件代码中的prop值以反映父元素状态的变化

---

我想这就是为什么我一开始就如此困惑的原因，因为在状态变化时重新渲染是其工作的核心。我使用react devtools来调试并确定子组件的生命周期。现在一切都好了！不确定我是否需要钩子/其他生命周期方法来实现这个简单的功能，但我感谢大家的帮助

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

---

我想这就是为什么我一开始就如此困惑的原因，因为在状态变化时重新渲染是其工作的核心。我使用react devtools来调试并确定子组件的生命周期。现在一切都好了！不确定我是否需要钩子/其他生命周期方法来实现这个简单的功能，但我感谢大家的帮助

尝试将componentWillMount更改为componentDidMount。另外，您可以创建一个代码沙盒吗？尝试将componentWillMount更改为componentDidMount。另外，你能创建一个codesandbox吗？我确实认为componentWillMount是不安全的，所以我真的不知道我是如何推荐任何遗留的东西的？componentDidMount和componentDidUpdate都不是遗留的，那么我建议使用哪种遗留方法呢？另外，我建议使用一个刚刚出现的钩子？我的错，我误解了你最初所说的。getDerivedStateFromProps方法仍然应该得到充分考虑，因为它是最可靠的方法，但您建议使用hooks也可以。一切都很好！我的措辞也很糟糕，所以不仅仅是你。老实说，在这一点上，使用钩子要干净得多。我确实认为组件Willmount是不安全的，所以我真的不知道我是如何推荐任何遗留的东西的？componentDidMount和componentDidUpdate都不是遗留的，那么我建议使用哪种遗留方法呢？另外，我建议使用一个刚刚出现的钩子？我的错，我误解了你最初所说的。getDerivedStateFromProps方法仍然应该得到充分考虑，因为它是最可靠的方法，但您建议使用hooks也可以。一切都很好！我的措辞也很糟糕，所以不仅仅是你。老实说，在这一点上，使用钩子要干净得多。