获取数据的功能保持循环运行

Question

我有一个从后端获取一些数据的函数，然后我只想将其分配给状态并在浏览器中显示。一切正常，但是我不知道为什么当我运行请求时，函数会不断调用API而不会停止。这是什么原因呢？ 似乎该函数陷入了某种while-true循环中。

function App() {
  const [orders, setOrders] = useState();

  const getOrders = async () => {
    const response = await axios.get("/api/orders/");
    setOrders(response);
    console.log(response);
  };
  getOrders();
  return <div className="App">{JSON.stringify(orders)}</div>;
}

export default App;

Answer 1

  

这是什么原因？

之所以发生这种情况，是因为您在功能组件内的每个渲染器上都调用了一个函数。

  const getOrders = async () => {
    const response = await axios.get("/api/orders/");
    setOrders(response); // this will re render the component
    console.log(response);
  };
  getOrders(); // this will be called every render and cause the infinity loop

渲染组件时，调用getOrders，此函数调用setOrders会重新渲染组件，从而导致无限循环。

---

第一个渲染=>调用getOrders =>调用setOrders =>渲染=>

第二个渲染=>调用getOrders =>调用setOrders =>渲染=>
...

---

您需要使用useEffect挂钩或在某些事件（可能是单击按钮）上调用该函数

例如使用useEffect

function App() {
    const [orders, setOrders] = useState(null);

    useEffect(() => {
        const getOrders = async () => {
            const response = await axios.get("/api/orders/");
            setOrders(response);
            console.log(response);
        };
       getOrders();
    }, []); 

    return <div className="App">{JSON.stringify(orders)}</div>;
}

Answer 2

我认为您在这里使用react-hooks，因此您的getOrders函数一直都在呈现。

使用react中的useEffect避免这种情况。

    function App() {
      const [orders, setOrders] = useState();

      useEffect(() => {
const getOrders = async () => {
        const response = await axios.get("/api/orders/");
        setOrders(response);
        console.log(response);
      };
      getOrders();
}, [])
      return <div className="App">{JSON.stringify(orders)}</div>;
    }

    export default App;