在 React Native 中，当您导航回组件时，如何设置组件的状态？答案

【问题标题】：In React Native, how do you set the state of a component when you navigate back to it?在 React Native 中，当您导航回组件时，如何设置组件的状态？
【发布时间】：2018-10-04 18:23:31
【问题描述】：

我正在尝试从一个组件导航到另一个组件，然后将参数传递回您开始使用的原始组件。

当数据从组件 B 传回组件 A 时，我想用该数据更新组件 A 的状态，但我不断收到错误消息：

不变量违规：超过最大更新深度。 React 限制了防止无限循环的嵌套更新数。

组件 A

componentDidUpdate() {
    const { params } = this.props.navigation.state;

    // this won't work as it creates an infinite loop
    this.setState({
        property: params.myproperty
    });
}

render() {
    return (
        <TouchableOpacity onPress={() => navigate('B')}>
            <Text>Go to B</Text>
        </TouchableOpacity>
    );
}

组件 B

render() {
    return (
        <TouchableOpacity onPress={() => navigate('A', {myproperty: 'something'})}>
            <Text>Back to A</Text>
        </TouchableOpacity>
    );
}

我应该使用不同的生命周期挂钩而不是 componentDidUpdate 吗？我看到有些人在setState() 周围添加了一个条件，但我不确定它是如何工作的。

componentDidUpdate() {
    const { params } = this.props.navigation.state;

    if(params.myproperty) {
        this.setState({
            property: params.myproperty
        });
    }
}

params.myproperty 在组件首次挂载时将不存在，因此会导致未定义的错误。导航回组件 A 时如何设置它的状态？

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

你需要这样做

屏幕 A：

this.props.navigation.navigate('ScreenB', {
              onPressScreenAFun: (params) => {
                this.screenAFun(params)
              },
            })

screenAFun = (params) => {
console.log(params)
}

屏幕 B：

    screenBFun = (params) => {
       const { onPressScreenAFun } = this.props.navigation.navigate.state.params

      onPressScreenAFun(params)
      this.props.navigation.goBack()
    }

【讨论】：

【解决方案2】：

不是在componentDidMount()中处理this.setstate，而是在componentWillMount()中处理，这样不会造成无限循环。例如：

componentWillMount() {
  const { navigation } = this.props;

  const myproperty = navigation.getParam('myproperty', '0');
  this.setState({ property: myproperty});            
}

【讨论】：