onChange react-select 不調用我的 function

Question

我有以下反應選擇代碼，它們都可以正常工作並設置我的 Formik state 值。

  const [selectedOptions, setSelectedOptions] = useState([]);  

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={(selectedOptions) => {
            let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOptions } };
            handleChange(e);
            handleChangeIndex(index);
        }}
    />

我的問題是，在onChange期間，我還想調用另一個 function: handleChangeIndex來設置 state 值，即：

  const handleChangeIndex = index => selectedOption => {
    console.log("inside handleChangeIndex....")
    const optionsCopy = [...selectedOptions];
    optionsCopy[index] = selectedOption;

    setSelectedOptions(optionsCopy);
  };  

在我上面的<Select>中，我的 function handleChangeIndex(index)沒有被調用，因為我沒有看到 console.log 消息，但是如果我只使用我的handleChangeIndex如下調用<Select>它就可以工作。

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={handleChangeIndex(index)}
    />

人們可以協助如何在頂部<Select>中調用我的 function

Answer 1

當您將handleChangeIndex直接傳遞給Select時，您正在調用 function，它返回另一個 function（柯里化）。 然后Select在值更改時調用新的內部 function 。

當您在給出的第一個示例中直接在onChange中調用handleChangeIndex時，您只調用了一次，這意味着您將獲得內部 function，然后什么也不做。

如果您隨后使用selectedOptions調用該內部 function ，那么它應該可以正常工作。

  const [selectedOptions, setSelectedOptions] = useState([]);  

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={(selectedOptions) => {
            let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOptions } };
            handleChange(e);
            handleChangeIndex(index)(selectedOptions);
        }}
    />