通过 react useState 钩子更新项目

Question

我对 react 中的功能组件不熟悉，我在更新数据时遇到了问题。这是我的函数，它只是将实际数据设置为变量，找到实际项目并更新它。问题是正确找到实际项目但不更新数据。当然，数据只是带有元素数组的 useState。

  const onEditElement = (elementId) => {
    let elements = data;
    let actualElement = elements.find((x) => x.id === elementId);
    actualElement = { value: "newValue" };
    setData(elements);
};

这就是数据的样子：

const [data, setData] = useState([{id: 1, value: "initial"}]);

我该如何解决这个问题？是什么原因造成的？

Answer 1

您正试图通过更改 onEditElement() 函数中找到的对象来更新元素数组，但该代码不起作用（请阅读下面的错误部分以了解发生这种情况的原因）。

你应该像这样改变函数：

const onEditElement = (elementId) => {
  let elements = [...data];
  let currentElementIndex = elements.findIndex((x) => x.id === elementId);
  if (currentElementIndex === -1) return;
  elements[currentElementIndex] = { id: elementId, value: "newValue" };
  // if you do elements[currentElementIndex].value = ... your data array will be mutated. then its better you do the way above
  setData(elements);
};

说明

1. 通常：在React Class Component 中，我们定义了一个状态，并使用setState({ key: value }) 更新该状态。 在React Functional Component 我们有不同的方法。我们可以有多个useStates，当我们使用状态设置器时我们应该更新整个事情。那么，如果我们有{ key1: value1, key2: value2 } 并且我们想要更改key1 的值。我们应该将{ key1: newValue1, key2: value2 } 放入状态设置器中。我们可以用setData((prvData) => ({ ...prevData, key1: newValue1 })) 做到这一点
2. 您的案例：您有一个对象数组。您使用的是类还是功能组件并不重要。假设您在类组件中的this.state 数据键中有一个数组，例如this.state = { data: [] }。您应该将带有更新项目的整个数组放入setState 函数中，例如setState({ data: WHOLE_ARRAY_WITH_UPDATED_ITEMS })。您也应该在功能组件中执行此操作并执行setData(WHOLE_ARRAY_WITH_UPDATED_ITEMS)

错误：

1. 您应该使用扩展运算符来防止改变 data 数组。
2. 您正在定义名为actualElement 的新变量，并且您正在更新此变量并认为它应该更改元素数组，但它是一个与elements 数组无关的个体对象。此变量与元素数组分开，更改它不会对元素数组产生影响。您应该以我在上面的代码中所做的方式直接使用当前编辑索引找到实际元素索引并更新元素数组。