从一个孩子改变父母的状态并在另一个孩子反应原生中使用它 [英] Change parent's state from a child and use it in another child react-native

问题描述

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

I need to change parent component A's state from a child component B and use that updated state in another child component C of that parent component A . I did the following. I could update parent component from the child component but the second child component is still getting the old state of the parent component. So what's wrong here?

组件 A 有 B、C 子组件.(这里，A也是某人的孩子)

Component A has B,C childs. (here, A is also someone's 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 的子组件 B 中，我想通过回调函数更改 A 的 state.name.它确实(经过测试)

From A's child component B, I want to change A's state.name from a call back function. And it does (tested)

 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 的另一个子组件 C.在我从 B 更改 A 的 state.name 之后，我需要从组件 C 中保存它.

A's state.name is also passed as a prop to A's another child component C. After I change A's state.name from B, then I need to save that from component 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>);
          }
       }

    }

推荐答案

你需要在 C 类中使用 componentWillReceiveProps 函数.使用这个方法你可以根据更新的props更新C类.

you need to use componentWillReceiveProps function in C class. Using this method you can update C class according to its updated props.

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

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

这篇关于从一个孩子改变父母的状态并在另一个孩子反应原生中使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！