如何更新 Array 对象中的状态？答案

【问题标题】：How to update state in Arr object?如何更新 Array 对象中的状态？
【发布时间】：2021-01-27 00:51:59
【问题描述】：

您好，我对 React 中的更新状态有疑问。

const [test, setTest] = useState(
    [
        {
            name: "example1" //i want update single el
        },
        {
            name: "example2" //i want update single el
        }
    ]
)

const updateTest = () => {
    setTest([{ ...test[0], name: "example1 changed"}])
}

我想要更新元素而不删除另一个元素。目前，当我单击 updateTest 时，它会导致我的 test[1] 被删除。为什么？？

【问题讨论】：

见React: Updating state when state is an array of objects

标签： javascript arrays reactjs object state

【解决方案1】：

你应该这样做：

const updateTest = () => {
  const newArray = [...test]; // use proper name
  newArray[0].name = "new-example1";
  setTest(newArray);
}

无论如何，通常你想在更新状态之前map、filter 或其他任何东西，你应该根据你的用例来弄清楚。这是一种测试技巧

【讨论】：

【解决方案2】：

您可以替换数组中的元素，然后将其作为新数组传播或使用 map 以用函数覆盖更改。

const [test, setTest] = useState(
    [
    {
        name: "example1" //i want update single el
    },
    {
        name: "example2" //i want update single el
    }
    ]
)

const updateTestSplice = () => {
    let temp = ([...test])
    temp.splice(0, { name: "example1 changed" })
    setTest([...temp])
}

const updateTestMap = () => {
    setTest(
        test.map(el =>
            el.name === "example1"
                ? { name: "example1 changed" }
                : el)
    )
}

【讨论】：

【解决方案3】：

您所做的是将test 设置为一个只有一个元素的新数组。如果你只想向数组中添加一个新元素，你可以这样做：

setTest([{ ...test[0], name: "example1 changed"}, ...test]);

你最终会得到一个包含原始元素和添加元素的数组。

另一方面，如果你想替换一个元素，你可以使用splice:

setTest(test.splice(0,1,{ ...test[0], name: "example1 changed"}));

第一个参数（在本例中为 0）是您想要开始的位置（因此在本例中位于数组的开头），下一个参数 (1) 是您要删除多少现有元素，最后一个一个是您要添加到数组中该位置的元素。

【讨论】：