通过 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);
};

描述

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

错误:

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

通过 react useState 挂钩更新项目

Updating item by react useState hook

reactjs

react-hooks

react-functional-component

use-state