React使用useState更新空formData数组无响应问题求助

问题根因 #

• 你的formData初始值是空数组，调用setFormData时直接对旧的formData执行map操作，空数组遍历后返回的还是空数组，这就是state一直为空的核心原因。
• 现有更新逻辑完全不符合「存在则更新、不存在则追加」的需求：当前逻辑是遍历旧数组的每一项，如果id匹配就修改当前项，不匹配就直接替换成当前点击的item，完全没有追加新项的逻辑。
• 状态更新时的字段取值逻辑错误，你混用了res.isActive和item.isActive，但你要修改的是新增的checked字段，应该基于已存状态的checked值取反，而不是原始item的isActive。
• 原有列表渲染的button未加唯一key属性，不符合React渲染规范，容易引发列表渲染异常。

修复后的完整代码 #

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((prevFormData) => {
      // 先查找当前点击项是否已存在于数组中
      const existIndex = prevFormData.findIndex(res => res.id === item.id);
      if (existIndex > -1) {
        // 存在则更新对应项的checked状态
        const newFormData = [...prevFormData];
        newFormData[existIndex] = {
          ...newFormData[existIndex],
          checked: !newFormData[existIndex].checked
        };
        return newFormData;
      } else {
        // 不存在则追加到数组末尾，初始化checked为true
        return [...prevFormData, {...item, checked: true}];
      }
    });
  };

  // 可打开控制台查看formData的实时更新状态
  console.log('当前formData值：', formData);

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

内容的提问来源于stack exchange，提问作者Rob Terrell