setState 第二次出错后导航到另一个页面答案

【问题标题】：Navigate to another page after setState gives error the 2nd timesetState 第二次出错后导航到另一个页面
【发布时间】：2018-06-05 13:10:28
【问题描述】：

我正在使用react-native-navigation（不确定这是否相关）并尝试处理简单的道具。但是，当我从 ScreenA 转到 ScreenB 时，它可以正常工作。之后，如果我pop() screen 到 ScreenA 然后再次单击同一组件转到 ScreenB，应用程序崩溃并出现以下错误：

您试图将键 a 设置为值 2 本来应该是不可变的并且已被冻结的对象。

这是ScreenA: Preview 中代码的最小示例：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';

export default class Preview extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: { a: 0, b: 1, c: 2 }
    };
  }

  _goToFullview() {
    let temp = this.state.data;
    temp.a = 2;
    this.setState({ data: temp });
    this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });
  }

  render() {
    return (
      <View>
        <Text>{"a: " + this.state.data.a + ","}</Text>
        <Text>{"b: " + this.state.data.b + ","}</Text>
        <Text>{"c: " + this.state.data.c}</Text>
        <TouchableOpacity onPress={ () => this._goToFullview() }>
          <Text>Go To Fullview</Text>
        </TouchableOpacity>
      </View>
    )
  }

}

这里是ScreenB: FullView：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';

class Fullview extends Component {

  render() {
    return (
      <View>
        <Text>{"a: " + this.props.data.a + ","}</Text>
        <Text>{"b: " + this.props.data.b + ","}</Text>
        <Text>{"c: " + this.props.data.c}</Text>
        <TouchableOpacity onPress={ () => this.props.navigator.pop({ animated: true, animationType: 'fade' }) }>
          <Text>Go back to preview</Text>
        </TouchableOpacity>
      </View>
    )
  }

}

我相信以上信息应该足以理解我的问题。谁能解释为什么会发生这种情况以及解决此问题的简单解决方案或提示？

【问题讨论】：

你从哪里得到this.state.poll 你所在的州没有任何投票变量
打错了，是this.state.data

标签： react-native react-native-navigation

【解决方案1】：

react-native-navigation 存在一些与你相关的问题。

不知何故，将一些道具传递给导航器会使它们不可变和冻结。

所以当你这样做时，在你的屏幕 A 中

this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });

有可能 this.state.data 变得不可变，并且当您尝试在下一次修改它时对其进行修改。

你可以通过传递另一个这样的引用来尝试吗：

this.props.navigator.push({ screen: "App.FullView", passProps: { data: {...this.state.data} } });

看看它是否有效？

编辑：

如果您的 data.a、data.b 和 data.c 也是对象，您可能需要创建一个 deepClone（请参阅：https://github.com/wix/react-native-navigation/issues/394#issuecomment-255936630）

this.props.navigator.push({ screen: "App.FullView", passProps: JSON.parse(JSON.stringify(this.state.data) } });

【讨论】：