react-dropzone拖拽上传时checkbox无条件自动勾选该如何修复？

问题根因 #

• confirmChecked函数返回值不符合受控checkbox的要求：当选中列表为空时返回undefined，同时判断逻辑完全颠倒，导致checked属性值不符合预期
• 同时为checkbox指定了checked（受控模式）和defaultChecked（非受控模式）两个冲突属性，导致组件行为异常
• handleCheckedStatus勾选状态处理逻辑完全颠倒，导致选中数组的更新和用户操作相反
• 全选checkbox错误绑定onClick事件而非onChange，也会触发异常状态

修复步骤 #

1. 修正confirmChecked函数逻辑，保证永远返回布尔值，同时调整判断逻辑：

const confirmChecked = useCallback(
  index => {
    // 包含当前index就返回true（选中），否则返回false（未选中）
    return indexesArrayForChekedList.includes(index);
  },
  [indexesArrayForChekedList],
);

2. 删除所有checkbox的defaultChecked="false"属性，受控组件不需要该配置
3. 修正handleCheckedStatus的状态更新逻辑：

const handleCheckedStatus = useCallback(
  (e, idx) => {
    const checked = e.target.checked;
    if (checked) {
      // 勾选时添加index到选中数组
      setIndexesArrayForChekedList(prev => [...prev, idx]);
    } else {
      // 取消勾选时从选中数组移除index
      const indexArrayForUpdate = indexesArrayForChekedList.filter(el => el != idx);
      setIndexesArrayForChekedList(indexArrayForUpdate);
    }
  },
  [indexesArrayForChekedList],
);

4. 将全选checkbox的绑定事件从onClick改为onChange：

<input
  type="checkBox"
  name="allCheck"
  onChange={allCheckHandeling}
  checked={allCheckBoxStatus}
/>

5. 优化onDrop的依赖项，避免不必要的函数重建：

const onDrop = useCallback(
  acceptedFiles => {
    setFilesToUpload(prev => {
      const filesData = acceptedFiles.map((file, index) => {
        return { index: prev.length + index, name: file.name, size: file.size };
      });
      return [...prev, ...filesData]
    });
  },
  [],
);

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