无法使用 formdata 更新空数组

Question

我目前正在尝试在用户点击按钮时存储附加到网站上的按钮的数据。 我正在使用 onClick 函数来获取从按钮传入的数据，并尝试将其设置为状态。 我遇到的问题； 然而，无论出于何种原因，状态值都没有更新，它仍然是一个空数组。 如果对象存在于数组中，我想要的结果，更新它。 如果没有，则追加到数组中。 任何关于为什么状态没有正确更新的指导将不胜感激。 我的代码如下：

import { useState } from "react";

export default function App() {
  const [formData, setFormData] = useState([]);
  const data = [
    { name: "test1", id: 1, isActive: false },
    { name: "test2", id: 2, isActive: false }
  ];

  const handleClick = (item) => {
    setFormData(
      (formData) =>
        formData.map((res) =>
          res?.id === item.id
            ? { ...res, checked: !res.isActive }
            : { ...item, checked: !item.isActive }
        )
    );
  };

  return (
    <div className="App">
      {data.map((item) => {
        return <button onClick={() => handleClick(item)}>{item.name}</button>;
      })}
    </div>
  );
}

附上一个用于调试的代码沙箱： https : //codesandbox.io/s/peaceful-sun-20ec0?file=/ src/App.js: 0-681

Answer 1

我认为主要问题是您将formData初始化为一个空数组。 这使得handleClick formData上的map调用什么也不做，因为在空数组上调用 map 不会在任何元素上调用 map 函数。