React Native：您试图在本应不可变且已被冻结的对象上设置键

IT技术 javascript reactjs react-native
2021-05-16 19:08:11

我是本机react的新手，并且正在创建我的第一个。

在我的补充中，我决定动态更改我的应用程序的背景颜色，为此我做了这样的事情 

let style = StyleSheet.flatten({
    upperRow: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 5, 
        backgroundColor: "white"
    },
})

let {
    upperRow
} = style

然后像这样的 componentWillReceiveProps

componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {
        console.log("previous value is greater")
           //change background color to red
           upperRow["backgroundColor"] = "#ffe5e5"
           console.log(upperRow)
           //We 
       }
     }
    }

这是抛出以下错误

您试图backgroundColor使用本#ffe5e5 应不可变且已冻结的对象上的值 设置键。

问题：谁能告诉我这里出了什么问题？

1个回答

你应该知道的一些事情Stylesheet：

  • 当你这样做时Stylesheet.flatten，它会将样式对象数组扁平化为一个不可变的样式对象。
  • 当你这样做时Stylesheet.create，它会生成一个不可变的样式对象。

但为什么它必须是不可变的？

参考文档，为了提高性能，样式对象的不变性将使 UI 和 JS 线程之间的通信更简单。换句话说，它们将仅使用样式对象的 ID 通过本机桥接器相互通信。所以，对象不能被变异。

这个问题的解决方案就像这样简单：

  • 使用一系列样式。
  • 使用状态动态更新样式。

以下是演示如何执行此操作的代码： 

class App extends React.Component {

  state = {
    clicked: false
  }

  handleOnPress = () => {
    this.setState(prevState => ({clicked: !prevState.clicked}))
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: this.state.clicked ? "blue" : "red"}]}>
        <Button onPress={this.handleOnPress} title="click me" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是代码的 Snack Expo 链接：https : //snack.expo.io/SJBLS-1I7

其它你可能感兴趣的问题
上一篇TypeError：undefined 不是 React Native 中的对象（评估“this.state.Gas”） 下一篇yup.validate 只返回错误数组中的单个字段