将 parent 的状态从 child 更改为另一个 child react-native

Question

我需要从 child 组件 B 更改 parent 组件 A 的状态并使用已更新状态在另一个child组件C中parent组件A 。我做了以下事情。我可以从 child 组件更新 parent 组件，但第二个 child 组件仍然是 parent 组件的旧状态。那么这里出了什么问题？

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

  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 的 child 组件 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 也作为 prop 传递给 A 的另一个 child 组件 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 函数 class。使用此方法，您可以根据其更新的属性更新 C class。

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的回答。

将 parent 的状态从 child 更改为另一个 child react-native

Change parent's state from a child and use it in another child react-native

javascript

react-native

react-native-android