Async React Select 组件如何更改 loadOptions 函数的参数

Question

我有一个反应异步选择组件。这个组件有一个loadOptions props，你需要在其中传递一个函数来加载数据。目前看起来是这样的

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

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

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