React Hooks中如何禁用setSubmittedNominees对应下拉复选框选项

解决方案 #

你使用的multiselect-react-dropdown组件本身支持预选项禁用能力，只需要按以下步骤修改代码即可生效：

步骤1：处理选项数据，给已提交的选项加禁用标记 #

把你原来直接修改原options数组的forEach逻辑，移到submittedNominees加载完成的useEffect里，给匹配的选项添加disabled: true标记：

useEffect(() => {
  const fetchData = async () => {
    try {
      setSubmittedNominees(submitted);
      // 新增：处理选项，给已提交的选项加禁用标记
      const processedOptions = options.map(opt => {
        const isSubmitted = submitted.some(sub => sub.id === opt.id);
        return {
          ...opt,
          displayValue: `${opt.name}\t${opt.email}`,
          disabled: isSubmitted
        }
      });
      setOption(processedOptions);
    } catch (e) {
      console.log(e);
    }
  };
  fetchData();
}, []);

步骤2：修正Multiselect组件的属性配置 #

给组件补充disabledProp、正确的selectedValues和disablePreSelectedValues属性：

<Multiselect
  onSelect={(e) => handleTypeSelect(e, selectedOption.length)}
  options={selectedOption.length + 1 === maxOptions ? [] : option}
  displayValue="displayValue"
  // 新增/修正以下3个属性
  selectedValues={submittedNominees}
  disablePreSelectedValues={true}
  disabledProp="disabled"
  // 原有属性保留
  showCheckbox={true}
  emptyRecordMsg={"Maximum nominees selected !"}
/>

补充说明 #

• 你之前代码失效的核心原因是没有给组件传入disabledProp属性指定禁用字段，且之前的selectedValues传了未定义的局部变量subEmail，而非完整的已提交数组
• 不要直接遍历修改原options数组，统一通过状态管理处理后的选项数据即可保证渲染生效

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