Question

当前代码

Parent.js

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickname: 'parent'
    };
  }
}

Child.js

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nickname: props.navigation.state.params.nickname
    };
  }

  onPressUpdate() {
    const { nickname } = 'Child';
      this.props.navigation.navigate('Parent', { nickname: nickname });
  }
}

我要做什么

Parent.js显示昵称，并在Child.js中对其进行编辑。完成编辑昵称后，导航回到Parent.js。然后，我想在上面的代码中显示一个新的昵称“孩子”。如果您能给我任何建议，我将不胜感激：）

Answer 1

您可以在父代码中使用componentDidUpdate。

类似这样的东西：

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.nickname !== prevProps.nickname ) {
    this.seteState({nickname:this.props.nickname});
  }
}

当您从孩子导航到父母时，传递昵称进行更新，它将起作用，并将setState设置为新的。

如何在React Native中从子组件更新父组件中的状态？

1 个答案: