Question

我使用钩子制作了一个react下拉组件。在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都很熟悉。

Answer 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;

希望这对您有用。

多次渲染同一组件时避免多次API调用

1 个答案: