React组件中向传入的handleOnChange函数传参问题求助

你的问题出在onChange的写法上：handleOnChange(patientNum='one')会在组件渲染时立即执行函数，而非选项变化时触发，且传递给onChange的是函数执行后的返回值（不是函数本身），这直接导致了报错。下面提供两种可行的解决方案：

方案一：子组件用箭头函数包裹传递参数 #

修改子组件PmAsyncSelect.jsx中的AsyncSelect配置：

<AsyncSelect
  openMenuOnClick={false}
  isClearable={true}
  defaultValue={null}
  onChange={(selectedOption) => handleOnChange(selectedOption, patientNum)}
  loadOptions={loadOptions}
/>

接着在父组件pmMerge.jsx中更新handleOnChange函数，通过接收的patientNum参数区分要更新的状态：

const handleOnChange = async (selectedOption, patientNum) => {
  // 处理清空选中项的场景
  if (!selectedOption) {
    patientNum === 'one' ? setPatientOne({}) : setPatientTwo({});
    return;
  }

  // 调用接口获取患者完整信息（替换为你的实际接口逻辑）
  const patientInfo = await fetchPatientDetail(selectedOption.value);

  // 根据patientNum更新对应状态
  if (patientNum === 'one') {
    setPatientOne(patientInfo);
  } else {
    setPatientTwo(patientInfo);
  }
};

方案二：父组件提前绑定参数（简化子组件逻辑） #

如果不想让子组件感知patientNum的存在，可以在父组件渲染子组件时，直接绑定好参数：

// 父组件渲染第一个AsyncSelect
<PmAsyncSelect
  handleOnChange={(option) => handleOnChange(option, 'one')}
  loadOptions={loadOptions}
/>

// 父组件渲染第二个AsyncSelect
<PmAsyncSelect
  handleOnChange={(option) => handleOnChange(option, 'two')}
  loadOptions={loadOptions}
/>

此时子组件PmAsyncSelect.jsx无需处理参数逻辑，直接使用传入的handleOnChange即可：

<AsyncSelect
  openMenuOnClick={false}
  isClearable={true}
  defaultValue={null}
  onChange={handleOnChange}
  loadOptions={loadOptions}
/>

两种方案都能实现两个AsyncSelect独立更新对应状态，你可以根据项目代码结构选择更适配的一种。

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