点击复选框触发TypeError错误，寻求问题原因及解决方案

我遇到了复选框状态更新的错误，截图如下：

状态与处理函数代码 #

const [selectedUsersList, setSelectedUsersList] = useState<number[]>([]);

const handleSelectedUserCheckbox = (value: number) => {
  if (!selectedUsersList?.includes(value)) {
    setSelectedUsersList([...selectedUsersList, value]);
  } else {
    setSelectedUsersList(selectedUsersList?.filter((id) => id !== value));
  }
};

复选框渲染代码 #

loadingUsers || userList?.getUsersForPush.length ? (
  (textToSearch?.length >= 3 && usersListSearch ? usersListSearch : userList 
    )?.getUsersForPush?.map((user) => (
     <Field
     as={Checkbox}
     key={user.id}
     name="userIds"
     value={user.id}
     label={user.name}
     title={user.name}
     id={`userIds-${user.id}`}
     className={styles.fieldsCheckbox}
     checked={selectedUsersList?.includes(
     Number(user.id)
    )}
      onChange={() =>handleSelectedUserCheckbox(Number(user.id))}/>
 ))

问题排查与解决方案 #

• 异步状态更新的闭包问题：当前处理函数直接依赖selectedUsersList的当前值，但React状态更新是异步的，快速操作时会因为闭包捕获旧状态，导致更新不准确。改用函数式更新，基于最新状态修改：

  const handleSelectedUserCheckbox = (value: number) => {
    setSelectedUsersList(prevList => {
      return prevList.includes(value) 
        ? prevList.filter(id => id !== value) 
        : [...prevList, value];
    });
  };
  

• 表单库冲突：所有复选框name都设为userIds，如果用了Formik这类表单库，可能会和本地状态selectedUsersList产生冲突，建议移除name属性，或者确保表单库状态与本地状态同步。
• 类型匹配问题：确认user.id转换为数字后与selectedUsersList的元素类型完全一致，避免因类型不匹配导致includes判断出错。

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