У меня есть функция, которая получает некоторые данные из моего бэкэнда, а затем я хочу просто присвоить их состоянию и отобразить в своем браузере. Все работает правильно, но я не знаю, почему, когда я запускаю запрос, функция продолжает вызывать API без остановки. Что является причиной этого? Кажется, что функция застряла в каком-то цикле while-true.
function App() {
const [orders, setOrders] = useState();
const getOrders = async () => {
const response = await axios.get("/api/orders/");
setOrders(response);
console.info(response);
};
getOrders();
return <div className = "App">{JSON.stringify(orders)}</div>;
}
export default App;
Вы начинаете визуализировать компонент, а также создаете асинхронный запрос, который разрешится через некоторое время. Рендеринг завершается, и через некоторое время завершается ваш асинхронный запрос. Это вызовет повторную визуализацию, которая, в свою очередь, создаст новый асинхронный запрос и так далее до бесконечности.
Вы хотите использовать хук Effect, который предлагает React:
https://reactjs.org/docs/hooks-effect.html
function App() {
const [orders, setOrders] = useState();
const getOrders = async () => {
const response = await axios.get("/api/orders/");
setOrders(response);
console.info(response);
};
useEffect(() => {
getOrders();
}, []); //Empty array = no dependencies = acts like componentDidMount / will only run once
return <div className = "App">{JSON.stringify(orders)}</div>;
}
export default App;
Я думаю, что вы используете здесь хуки реакции, поэтому ваша функция getOrders все время получает рендеринг.
Используйте useEffect от реакции, чтобы избежать этого.
function App() {
const [orders, setOrders] = useState();
useEffect(() => {
const getOrders = async () => {
const response = await axios.get("/api/orders/");
setOrders(response);
console.info(response);
};
getOrders();
}, [])
return <div className = "App">{JSON.stringify(orders)}</div>;
}
export default App;
What is the reason for this?
Это происходит потому, что вы вызываете функцию при каждом рендеринге внутри функционального компонента.
const getOrders = async () => {
const response = await axios.get("/api/orders/");
setOrders(response); // this will re render the component
console.info(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.info(response);
};
getOrders();
}, []);
return <div className = "App">{JSON.stringify(orders)}</div>;
}
Я бы предложил добавить
debugger;
вышеconst response = await axios.get("/api/orders/");
и проверить стек вызовов в среде отладки.