Question

我需要从子组件 B 更改父组件 A 的状态，并在另一个子组件中使用更新状态 C 该父组件 A 。我做了以下。我可以从子组件更新父组件，但第二个子组件仍然获得父组件的旧状态。那么这里有什么问题？

组件A有B，C孩子。（这里，A也是某人的孩子）

  class A extends Component {
        constructor(props) {
          super(props);
        });

        this.state = {
          name:this.props.name // first it gets name from A's parent
        }
        setName(UpdatedName){
          this.setState({ name: UpdatedName });    
        }
       render() {
          return (
            <View>
             <B callBackFromA={this.setName.bind(this)}/>
             <C name={this.state.name}/>
            </View>);
          }
       }

从A的子组件B，我想从回调函数中更改A的state.name。它确实（测试过）

 class B extends Component {
            constructor(props) {
              super(props);
              callBackFromA :this.props.callBackFromA
            });

            this.state = {                 
            }

         render() {
          return (
            <View>
             <TouchableOpacity onPress={()=>this.callBackFromA('new name')}> </TouchableOpacity>
            </View>);
          }
       }

    }

A的state.name也作为道具传递给A的另一个子组件C. 在我从B更改A的state.name之后，我需要从组件C中保存它。

  class C extends Component {
            constructor(props) {
              super(props);
            });

            this.state = {
              name:this.props.name
            }
            saveData(){
              //..problem is that this getting old state.name of A after B changes..
              console.log(this.state.name);   
            }
         render() {
          return (
            <View>
             <TouchableOpacity onPress={()=>this.saveData()}> </TouchableOpacity>
            </View>);
          }
       }

    }

Answer 1

您需要在C类中使用componentWillReceiveProps函数。使用此方法，您可以根据更新的道具更新C类。

componentWillReceiveProps(nextProps)
{
   if(this.props.name != nextProps.name)
   {
    //do your task
     this.setState({name:nextProps.name})
   }
}

https://facebook.github.io/react/docs/component-specs.html

Answer 2

您的组件C不应使用该状态。状态仅在信息需要从组件内部更改时才有用，如果您只需要从上面的组件传递的信息只需指向道具。

class C extends Component {

  saveData(){
    console.log(this.props.name);   
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={() => this.saveData()}> </TouchableOpacity>
      </View>);
  }
}

如果您必须将财产转移到州，请参阅Burak的答案。

从孩子改变父母的状态并在另一个孩子的反应中使用它

2 个答案: