javascript 如何记忆可重用组件中调用的API数据？

siotufzp 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(90)

我有一个打开对话框以提供输入的组件：

function App() {
  const [toggle, setToggle] = useState(false);
  return (
    <>
      <button onClick={setToggle(true)}>Show Dialog</button>
    </>
  );
}

export default App;

这是打开的对话框组件：

function Dialog() {

  return (
  <>
   <span>
     <div> Name: </div>
     <input type="text" />
   </span>
  <span>
     <div> Select: </div>
     <SelectionBox/>
   </span>
  </>
  );
}
export default Dialog;

选择框组件代码如下：

function SelectionBox() {
  const [value, setValue] = useState("");
  const [options, setOptions] = useState([]);
  const apiCalls = () => {
     service.getData1().then((data) => {
       service.getData2(data).then((opt) => {
         setOptions(opt);
       }).catch((e1) => {
         console.log(e1);
       });
     }).catch((e) => {
       console.log(e);
     });
     
  };

  return (
   <>
     <Select
      label="select"
      options={options}
      value={value} 
     />
   </>
  );

}
export default SelectionBox;

选择框组件调用两个API来获取和显示选择框中的数据。这个API调用需要时间，我想在打开对话框时只调用一次API，并记住该响应以进行进一步的对话框操作。这个选择框也可以在其他地方重复使用，并且所有地方的数据都是相同的。我如何才能实现这一点？
PS：我想在组件挂载的时候调用API。另外，不要打开使用任何库。

JavaScript

来源：https://stackoverflow.com/questions/72848409/react-how-to-memoize-api-data-called-in-reusable-component

1条答案

按热度按时间

gab6jxml1#

你可以在useEffect和localStorage的帮助下做到这一点。在每次挂载时，你都要检查localStorage中是否有保存的数据，如果有，就使用它，否则你就调用你的API，并将结果存储在localStorage中。类似这样：

import { useEffect } from "react";
function SelectionBox() {
  const [value, setValue] = useState("");
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const apiCalls = () => {
      service.getData1().then((data) => {
          service
            .getData2(data)
            .then((opt) => {
              localStorage.setItem("options", JSON.stringify(opt));
              setOptions(opt);
            })
            .catch((e1) => {
              console.log(e1);
            });
        })
        .catch((e) => {
          console.log(e);
        });
    };
    let opt;
    try {
      opt = JSON.parse(localStorage.getItem("options"));
    } catch (error) {
      console.log(error)
    }
    if (!Array.isArray(opt)) {
      apiCalls();
    } else {
      setOptions(opt);
    }
  }, []);

  return (
    <>
      <Select label="select" options={options} value={value} />
    </>
  );
}
export default SelectionBox;

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 如何记忆可重用组件中调用的API数据？

1条答案

相关问题

热门标签

最新问答