您试图在一个本来是不可变且已被冻结的对象上设置键 'left' 的值为 '50'答案

【问题标题】：You attempted to set the key 'left' with the value '50' on an object that is meant to be immutable and has been frozen您试图在一个本来是不可变且已被冻结的对象上设置键 'left' 的值为 '50'
【发布时间】：2021-05-29 19:14:44
【问题描述】：

在 react native 中，当我想用数组更新 useState 时出现此错误。

    import React, {useState, useEffect} from 'react';
import { StyleSheet, View, Text} from 'react-native';

var generatecubes = true;
var cubesarr = [];
const Cubes = ({cubeHeight, cubeMover}) => {
    const maxspikes = Math.ceil(global.canvasWidth/(global.cubesWidth + global.spacebetweencubes)+1);
    const cubesstyle = StyleSheet.create({
        cube:{
            position: 'absolute',
            width: global.cubesWidth,
            height: cubeHeight,
            transform: [
                {translateX: cubeMover},
            ],
            backgroundColor: 'blue',
        }
    })
    var [cubes, setCubes] = useState([]);
    if(generatecubes == true){
        generatecubes = false;
        var i;
        for(i=0; i<maxspikes; i++){
            cubesarr.push(
            {
                key: i,
                position:{
                    left:i*global.spacebetweencubes+global.cubesWidth+global.canvasWidth,
                }
            }
            );
        }
        setCubes(cubesarr);
    }
    if(global.cubechangeposition == true){
        var newarr = cubesarr;
        newarr[0].position.left = 50;
        console.log(newarr[0].position.left);
        /*console.log(cubesarr[0].position.left);
        cubesarr[0].position.left = (cubesarr.length)*global.spacebetweencubes+global.cubesWidth+global.canvasWidth;
        cubesarr.push(cubesarr.shift());
        setCubes(cubesarr);*/
        global.cubechangeposition = false;
    }
    return(
        cubes.map((cube) => {
            return(
              <View key={cube.key} style={[cubesstyle.cube,cube.position]}>
                  <Text style={{color: "white", fontSize: 20}}>{cube.key}</Text>
              </View>
            );
        })
    );
}
export default Cubes;

所有这些东西都会从 App.js 每秒更新一次。我尝试使用包含旧数组但仍然出现相同错误的新数组来更新数组。

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

您必须将 cubes 和 setCubes 声明为 const。您需要在useEffect钩子中生成并设置立方体数组请参考以下代码：

const [cubes, setCubes] = useState([]);
useEffect(() => {
    if(generatecubes == true){
        generatecubes = false;
        var i;
        for(i=0; i<maxspikes; i++){
            cubesarr.push(
            {
                key: i,
                position:{
                    left:i*global.spacebetweencubes+global.cubesWidth+global.canvasWidth,
                }
            }
            );
        }
        setCubes(cubesarr);
    }
}, []);

而且我认为您的代码中不需要以下代码块请删除它

    if(global.cubechangeposition == true){
        var newarr = cubesarr;
        newarr[0].position.left = 50;
        console.log(newarr[0].position.left);
        /*console.log(cubesarr[0].position.left);
        cubesarr[0].position.left = (cubesarr.length)*global.spacebetweencubes+global.cubesWidth+global.canvasWidth;
        cubesarr.push(cubesarr.shift());
        setCubes(cubesarr);*/
        global.cubechangeposition = false;
    }

【讨论】：