Question

我正在使用react-native-navigation（不确定这是否相关）并试图处理简单的道具。但是，当我从ScreenA转到ScreenB时，它没有任何错误。之后，如果我pop()筛选到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>
    )
  }

}

我相信上述信息应该足以理解我的问题。任何人都可以解释为什么会发生这种情况，并提供一个简单的解决方案或提示来解决这个问题吗？

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

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

1 个答案: