Javascript 函数获取数据，使其在循环中保持运行

我有一个函数，可以从后端获取一些数据，然后我只想将其分配到状态并在浏览器中显示。一切正常，但我不知道为什么当我运行一个请求时，函数会不停地调用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;

函数应用程序（）{
const[orders，setOrders]=useState（）；
const getOrders=async（）=>{
const response=wait axios.get（“/api/orders/”）；
设置命令（响应）；
控制台日志（响应）；
};
getOrders（）；
返回{JSON.stringify（orders）}；
}
导出默认应用程序；

---

您想使用以下效果：

函数应用程序（）{
const[orders，setOrders]=useState（）；
const getOrders=async（）=>{
const response=wait axios.get（“/api/orders/”）；
设置命令（响应）；
控制台日志（响应）；
};
useffect（（）=>{
getOrders（）；
}，[]）；//空数组=无依赖项=行为类似于componentDidMount/将只运行一次
返回{JSON.stringify（orders）}；
}
导出默认应用程序；

我认为您在这里使用的是react钩子，因此getOrders函数一直都在使用render

使用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;

函数应用程序（）{
const[orders，setOrders]=useState（）；
useffect（（）=>{
const getOrders=async（）=>{
const response=wait axios.get（“/api/orders/”）；
设置命令（响应）；
控制台日志（响应）；
};
getOrders（）；
}, [])
返回{JSON.stringify（orders）}；
}
导出默认应用程序；

这是什么原因

发生这种情况是因为在函数组件内的每个渲染中都调用函数

  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

=>重新渲染=>

---

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

e、 g.使用

useffect

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

函数应用程序（）{
const[orders，setOrders]=useState（null）；
useffect（（）=>{
const getOrders=async（）=>{
const response=wait axios.get（“/api/orders/”）；
设置命令（响应）；
控制台日志（响应）；
};
getOrders（）；
}, []); 
返回{JSON.stringify（orders）}；
}

我建议添加一个

调试器const response=wait axios.get（“/api/orders/”）并在调试环境中检查调用堆栈。您将开始呈现组件，并创建一个异步请求，该请求将在一段时间后解析。渲染完成，一段时间后异步请求完成。这将触发一个重新加载程序，该程序将创建一个新的异步请求，以此类推。
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>;
}