扩展运算符（...）在ES6中创建数组时会产生多余的字段。

Question

我希望通过onChange事件在各自的索引对象数组中嵌入一个新的键值对。然而，这样做虽然是正确的，但会在数组中添加额外元素。 原始的对象数组：

0:{data: {…}}
1:{data: {…}}
2:{data: {…}}
3:{data: {…}}
4:{data: {…}}

达到的结果：

0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}
5:"UK"
6:"UK"

预期结果：

0:{data: {…}}
1:{data: {…}}
2:{data: {…}, origin: "UK"}
3:{data: {…}, origin: "UK"}
4:{data: {…}}

以下是我的循环执行代码：

render: (rowData, indexes) => {
          return (
            <SelectField
              id={`origin-${indexes.rowIndex}`}
              defaultValue="US"
              style={{ position: 'absolute' }}
              onChange={text => {
                this.setState(
                  {
                    generalPermitSelectedVehicles: [
                      ...generalPermitSelectedVehicles,
                      (generalPermitSelectedVehicles[
                        indexes.rowIndex
                      ].origin = text),
                    ],
                  },
                  () => {
                    console.log({
                      generalPermitSelectedVehicles: this.state
                        .generalPermitSelectedVehicles,
                    });
                  },
                );
              }}
              menuItems={[
                {
                  label: 'America',
                  value: 'US',
                },
                {
                  label: 'United Kingdom',
                  value: 'UK',
                },
                {
                  label: 'Oman',
                  value: 'Oman',
                },
              ]}
            />
          );
        },

- Owais

---

... 不是一个运算符！ - Felix Kling

它实际上叫什么？它的目的是什么？你能详细说明一下吗？我们可以从你的陈述中学习。谢谢。 - Owais

我已经在我链接的帖子中解释了所有内容。 - Felix Kling

Answer 1

写成这样：

this.setState(prevState => {
   let data = [...prevState.generalPermitSelectedVehicles];
   data[indexes.rowIndex].origin = text;
   return {generalPermitSelectedVehicles: data};
})

为什么在你的情况下会失败？

因为当你执行以下操作时：

[...arr, (arr[index].origin=10)]

它将会做两件事情，首先它会更新该索引处的 origin 值，其次它还会在数组末尾添加 10（从 () 返回的值为 10）。

请查看以下代码片段：

let arr = [{a:1}, {a:2}, {a:3}];
arr = [...arr, (arr[1].a=500)];  //500 will get added in the last

console.log('new value', arr);

建议：使用更新函数（prevState），因为generalPermitSelectedVehicles的下一个状态（value）依赖于前一个值。

有关setState更新函数的更多详细信息，请查阅DOC。

- Mayank Shukla

Answer 2

您需要更新原始状态而不是追加它。您没有正确使用展开操作符。此外，当您想要基于 prevState 更新状态时，请使用函数式 setState。您需要执行以下操作：

 this.setState(
              prevState => ({
                generalPermitSelectedVehicles: [
                  ...prevState.generalPermitSelectedVehicles.slice(0, index.rowIndex),
                  {...prevState.generalPermitSelectedVehicles[
                    indexes.rowIndex
                  ], origin: text},
                  ...prevState.generalPermitSelectedVehicles.slice(index.rowIndex + 1)
                ],
              },
              () => {
                console.log({
                  generalPermitSelectedVehicles: this.state
                    .generalPermitSelectedVehicles,
                });
              },
            );

你的方法出错在于你是在原状态展开后添加更新状态，你需要更新现有的状态。

此外，请查看如何更新嵌套状态的答案。

- Shubham Khatri