异步反应选择组件如何更改loadOptions函数的参数

Question

我有一个反应性异步选择组件。这个组件有一个loadOptions道具，在这里您需要传递一个函数来加载数据。现在它看起来像这样

const MyComponent = () => {
  const [positionId, setPositionId] = useEffect('');

  return (
    {
      positionId &&
      <AsyncSelect
        loadOptions={(search, prevOptions, additional) => loadMyOptions(search, prevOptions, additional, positionId)}
          (...other props)
        />
    }

      <Input
      value={positionId}
      onChange={(e) => setPositionId(e.target.value)}
      />
  )
}

loadMyOptions函数描述数据加载逻辑。该函数接受最后一个参数positionId，它根据输入字段中输入的内容而变化。现在，如果在输入字段中输入一个值，则会出现AsyncSelect并加载必要的选项。但是，如果在输入中输入其他内容并更改positionId，并尝试将新数据加载到AsyncSelect中，则不会向后端发送带有新positionId值的请求。

我试着用useCallback包装这个函数

const loadNewOptions = useCallback(
  (search, prevOptions, additional) => {
    return loadMyOptions(search, prevOptions, additional, positionId);
  },
  [positionId]
);

但这没什么用。请告诉我如何制作它，以便当更改positionId并单击AsyncSelect时，带有新值positionId的请求会到达后端？

Answer 1

在代码中似乎存在一个竞争条件，但您不必使用“外部”positionId，而是使用您传递的条件：

    const loadNewOptions = useCallback((search, prevOptions, additional, posId) => {
      return loadMyOptions(search, prevOptions, additional, posId)
    }, [])