时间戳

首页 > 解决方案 > 数组不是在 react-native 中复制的

javascript - 数组不是在 react-native 中复制的

问题描述

我在不同的文件中有两个数组！首先在名为 maturi.js 的文件中，它看起来像

const BEL2010YEAR12 = [
  {
    question: "",
    hasImage: false,
    isAnswered: false,
    isTextQuestion: true,
    text: "",
    answers: [
      {
        id: "1",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "2",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "3",
        text: "",
        correct: false,
        userInput: false,
      },
      {
        id: "4",
        text: "",
        correct: true,
        userInput: false,
      },
    ],
  },
];

export default {
  BEL2010YEAR12,
};

第二个文件是我的 App.js，我在其中调用了 maturi（上面的文件），例如

import { BEL12 } from "../maturi";

然后我创建了另一个数组来首先复制名称为BEL2010YEAR12（来自上面的文件）所以

const [questions, setQuestions] = useState(BEL12.BEL2010YEAR12);

问题是当我编辑问题数组时，它会受到BEL12.BEL2010YEAR12数组的影响。这怎么可能。我很困惑。为什么问题数组更改了BEL12.BEL2010YEAR12？例如，如果我编辑问题，例如

questions[0].question = "example";
setQuestions(questions);

它将更改数组BEL2010YEAR12。我不想要那个！为什么它改变了它？

标签： javascriptreact-native

解决方案

使用扩展运算符复制数组。如果您尝试像以前那样直接放置它，它将存储引用，从而影响原始数组。您可以在 js中阅读有关价值与参考的更多信息

const [questions, setQuestions] = useState([...BEL12.BEL2010YEAR12]);

对于深层克隆（深层嵌套对象）：

const [questions, setQuestions] = useState(JSON.parse(JSON.stringify(BEL12.BEL2010YEAR12)));

推荐阅读