Ant Design Form.Item Checkbox 初始化选中问题解决方案

如果根据后端返回的数据设置 initialValue 为一个数组，并且其他不是 true 的字段 checkBox 也被选中了，可以尝试通过判断每个选项的值来解决这个问题。

首先，你需要在 Form.Item 中添加一个 onChange 事件处理函数，用来处理 checkBox 的选中状态。在这个事件处理函数中，你可以判断每个选项的值是否与后端返回的数据中的值一致，如果一致则将其设为 true，否则设为 false。

以下是一个示例代码：

<Form.Item name={item.key} valuePropName={'checked'} onChange={(e) => handleCheckboxChange(e, item.key)}>
  <Checkbox>{item.label}</Checkbox>
</Form.Item>

然后，在 handleCheckboxChange 函数中，你可以根据后端返回的数据设置 checkBox 的选中状态。示例代码如下：

const handleCheckboxChange = (e, key) => {
  const checked = e.target.checked;
  const data = [...form.getFieldValue(key)];

  // 根据后端返回的数据设置 checkBox 的选中状态
  if (checked) {
    data.push(key);
  } else {
    const index = data.indexOf(key);
    if (index > -1) {
      data.splice(index, 1);
    }
  }

  form.setFieldsValue({
    [key]: data,
  });
};

在这个示例代码中，我们首先获取当前 checkBox 的选中状态，然后获取当前表单项的值。根据后端返回的数据，如果 checkBox 被选中，则将当前表单项的值添加到 data 数组中；如果 checkBox 被取消选中，则将当前表单项的值从 data 数组中移除。最后，使用 form.setFieldsValue 方法更新表单项的值。

这样，根据后端返回的数据设置 initialValue 为一个数组时，其他不是 true 的字段 checkBox 就不会被选中了。