社区首页 >问答首页 >如何回溯可重用组件中调用的API数据？

问如何回溯可重用组件中调用的API数据？
EN

Stack Overflow用户

提问于 2022-07-03 09:02:46

回答 1查看 121关注 0票数 2

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

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

reactjs

async-await

react-hooks

promise

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 1

Stack Overflow用户

发布于 2022-07-03 09:20:05

您可以在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;