多次渲染同一组件时避免多次 api 调用答案

【问题标题】：Avoiding multiple api calls when same component is rendered multiple times多次渲染同一组件时避免多次 api 调用
【发布时间】：2020-05-09 08:36:43
【问题描述】：

我使用钩子制作了一个反应下拉组件。在 useEffect 挂钩中，我调用一个 api 来获取所有选项。在列表中多次调用下拉列表时，如何避免多次调用 api。代码结构是

const Dropdown = ({ handleChange }) => {
const [options, setOptions] = useState([]);

useEffect(() => {
//api call and setOptions
}, []);

return (
<Form.Dropdown name="abcd" label="abcd" options={options} onChange={handleChange} />
);
};

export default Dropdown;

我对 Redux 很熟悉，对 Rxjs 也比较熟悉。

【问题讨论】：

你只调用一次 getOption 是对的？？？
你使用了 useEffect 和 [ ] 依赖，所以它总是会在 api 调用 setOptions 时被调用，这可能是父组件重新加载的原因。

标签： reactjs react-redux react-hooks

【解决方案1】：

我正在考虑的一个简单场景是在已加载选项时不点击 API。您可以执行以下操作：

const Dropdown = ({ handleChange }) => {
const [options, setOptions] = useState([]);

useEffect(() => {
  if(!options.length){
     //api call and setOptions
  }
}, []);

return (
  <Form.Dropdown name="abcd" label="abcd" options={options} onChange={handleChange} />
  );
};

export default Dropdown;

希望这对你有用。

【讨论】：

我认为它不能解决我的问题。 Dropdown 组件将被渲染多次。最初，每个渲染下拉列表的选项都是空的，即使我将选项状态移动到 redux 并检查长度，每个组件仍然会调用 api，因为渲染比从 api 获得响应要快得多。
那么一个解决方案是提升状态，这样说我的意思是从父组件将选项作为道具传递给这里。并在父组件中执行一次 API 调用。