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

Question

在本机反应中，当我想用​​数组更新 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 更新。我试图用包含旧数组但仍然相同的错误的新数组来更新数组。

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

您必须将多维数据集和 setCubes 声明为 const。您需要在useEffecthook 中生成并设置 cubes 数组请参考以下代码：

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