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 中，我们有不同的方法。我们可以有多个 useState 并且当我们使用状态设置器时我们应该更新整个事情。然后，如果我们有 { key1: value1, key2: value2 } 并且我们想要更改 key1 的值。我们应该把 { key1: newValue1, key2: value2 } 放在 state setter 中。我们可以用 setData((prvData) => ({ ...prevData, key1: newValue1 }))
你的案例：你有一个对象数组。您使用的是类还是功能组件并不重要。假设您在类组件中的 this.state 数据键中有一个数组，例如 this.state = { data: [] }。您应该将包含更新项的整个数组放入 setState 函数中，例如 setState({ data: WHOLE_ARRAY_WITH_UPDATED_ITEMS })。您也应该在功能组件中执行此操作并执行 setData(WHOLE_ARRAY_WITH_UPDATED_ITEMS)

错误：

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

通过反应 useState 钩子更新项目

1 个答案: