Question

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

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

不变式：超过最大更新深度。反应限制了嵌套更新的数量以防止无限循环。

组件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时，该如何设置它的状态？

Answer 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()
    }

Answer 2

与其在componentDidMount（）中处理this.setstate，而不是在componentWillMount（）中处理它，它不会以这种方式创建无限循环。例如：

Please enter a name:  a
Please enter a name:  b
Please enter a name:  c
Please enter a name:  d
Please enter a name:  a
a is a duplicate name!

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

2 个答案: