不要在初始渲染时加载选项

Question

我的页面上有大量 select，我不想在每次页面加载时都触发 API 调用。如何在异步 react-select 组件初始化时跳过 loadOptions？

Answer 1

根据文档，您似乎可以指定 autoload={false}。来自 docs:

Unless you specify the property autoload={false} the control will automatically load the default set of options (i.e. for input: '') when it is mounted.

已更新：

要解决必须输入内容的问题，您可以添加一个 onFocus 回调。这将在 react-select 组件被点击或跳转到时触发，而不是等待用户输入内容。它可能看起来像这样：

<ReactSelect
  ...otherProps
  onFocus = { this.fetchData }
/>

为了防止不断 re-fetching 数据，您可能需要跟踪数据是否已在某处以状态获取。您可以将初始状态声明为 fetched: false，然后在加载选项的函数中，设置 this.setState({ fetched: true })。最后，您的 fetchData 函数可以在请求新数据之前检查 this.state.fetched。

Answer 2

state= {option1:'', option2:'', option3:''}

如果填写选项 1 渲染 select #2 的值

this.state.option1 && apicall for option 2().

如果填写选项 2 渲染 select #3 的值

this.state.option2 && apicall for option 3().

这一切都可以在componentDidMount()

这是假设当用户 select 有一个值时，您将该值存储在状态中。

不要在初始渲染时加载选项

Don't loadOptions on initial render

reactjs

react-select