В React Native как вы устанавливаете состояние компонента, когда возвращаетесь к нему?

Question

Я пытаюсь перейти от одного компонента к другому и затем передать параметры исходному компоненту, на котором вы начали.

Когда данные возвращаются из компонента 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, когда вы вернетесь к нему?

Answer 1

Вместо обработки this.setstate в componentDidMount (), обрабатывайте его в componentWillMount (), таким образом бесконечный цикл не будет создан.Например:

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

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

Answer 2

Вам нужно сделать это

Экран 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()
    }