JavaScript 数组对象值更新 (React)

Question

您好，我正在尝试更新表中的行值 (React Ant Ui)，它在我使用静态数据时有效。比如我的静态数据表数据是

[

    {

      "questionNumber": "",

      "questionType": "",

      "marks": "",

      "numberOfOptions": "",

      "correctOptions": "",

    },

    {

      "questionNumber": "",

      "questionType": "",

      "marks": "",

      "numberOfOptions": "",

      "correctOptions": "",

    },

  ]

我使用以下方法更新行数据-

  const onInputChange: any = (key, index) => (

    e: React.ChangeEvent<HTMLInputElement>

  ) => {

    const newData = [...tableData];

    newData[index][key] = (e);

    setTableData(newData);

  };

如果我想更新它的标记，index 1它工作得很好。但是我需要更新动态数据。我遵循了这种方法

const [tableData, setTableData] = useState<any>([]);

然后单击按钮，我将动态数组值推送到表数据中，就像这样

setTableData(Array(3).fill(newObj))

newObj价值在哪里

  const newObj = {

      "questionNumber": "",

      "questionType": "",

      "marks": "",

      "numberOfOptions": "",

      "correctOptions": "",

    }

但是现在我面临一个问题，如果我想改变 的值marks，它会更新所有的索引marks

如何像静态数组一样更新此动态数组的单个索引值？

Answer 1

您可以深度克隆对象数组。JavaScript 对象是引用。所以newObj被数组的每个槽引用。setTableData(JSON.parse(JSON.stringify(Array(3).fill(newObj))))

Answer 2

不要替换整个 tableData 状态，请尝试仅更新 tableData 状态引用中更改的内容。const&nbsp;newData&nbsp;=&nbsp;Array(3).fill(newObj) setTableData({...&nbsp;tableData,&nbsp;...newData});