Question

你好，我在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]被删除。为什么？

Answer 1

您应该这样做：

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

无论如何，通常情况下，您想要map，filter或其他任何状态，然后再更新状态，则应根据使用情况弄清楚。这是一种测试技巧

Answer 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)
    )
}

Answer 3

您所做的是将test设置为仅包含一个元素的新数组。如果只想向数组添加新元素，则可以执行以下操作：

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

，最后将得到一个既包含原始元素又包含添加的元素的数组。

另一方面，如果您要替换元素，则可以使用splice：

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

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

如何更新Arr对象中的状态？

3 个答案: