React中如何在map内使用useState？解决Hook调用报错

错误原因 #

你碰到的错误是因为React Hook的核心规则：所有Hook必须在组件的顶层作用域调用，不能放在循环、条件判断或者嵌套回调里。map的回调函数属于嵌套函数，在里面调用useState直接违反了这个规则。

另外你原代码里还有个小问题：useState("new Date(eachData.eDate)")把new Date()用引号包起来了，这会把它当成字符串而非Date对象，后续使用会出问题。

修复方案1：用单个State统一管理所有项的日期 #

用一个对象（或数组）来存储所有列表项的选中日期，在组件顶层初始化这个State，避免在循环里单独定义Hook。

修改后的代码：

const funName = () => {
  // 初始化：把data中每个项的eDate转成Date对象，存到以唯一标识为key的对象里
  const [endDates, setEndDates] = useState(() => {
    return data.reduce((acc, item) => {
      // 优先用item的唯一id当key，没有的话可以用其他唯一字段，尽量别用index
      acc[item.id] = new Date(item.eDate);
      return acc;
    }, {});
  });

  // 统一处理日期变更
  const handleDateChange = (itemId, newDate) => {
    setEndDates(prevState => ({
      ...prevState,
      [itemId]: newDate
    }));
  };

  return (
    <>
      {data.map((eachData) => (
        <CustomComponent
          key={eachData.id} // 用唯一id作为key，比index更稳定
          selected={endDates[eachData.id]}
          onChange={(date) => handleDateChange(eachData.id, date)}
        />
      ))}
    </>
  );
};

修复方案2：拆分独立子组件管理单个项的状态 #

把每个列表项的逻辑拆成单独的子组件，在子组件的顶层调用useState，符合Hook规则。

// 子组件：负责单个日期选择项的状态管理
const DateSelectorItem = ({ initialDate }) => {
  const [endDate, setEndDate] = useState(new Date(initialDate));

  return (
    <CustomComponent
      selected={endDate}
      onChange={(date) => setEndDate(date)}
    />
  );
};

// 父组件
const funName = () => {
  return (
    <>
      {data.map((eachData) => (
        <DateSelectorItem
          key={eachData.id}
          initialDate={eachData.eDate}
        />
      ))}
    </>
  );
};

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