时间戳

首页 > 解决方案 > 如何从 React Native 中的子组件更新父组件中的状态？

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

问题描述

当前代码

父.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。然后我想在上面的代码中显示一个新的昵称“孩子”。如果您能给我任何建议，我将不胜感激：）

标签： reactjsreact-native

解决方案

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

像这样的东西：

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

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

推荐阅读