保存axios对状态反应挂钩的响应

Question

我正试图使用钩子将Axios的响应保存到状态。但是，每当我尝试使用钩子时，组件都会继续无限次地重新渲染。

const [orders, setOrders] = useState([]);
const getUserOrders = async () => {
await API.getOrders(window.sessionStorage.id)
.then(res => setOrders(res.data.ordersArr))
.catch(err => console.log(err));
}
useEffect(() => {
if (logged_in) {
getUserOrders();
} else {
window.location.href = "/login";
}
}, [orders])

如果我控制台日志res.data.ordersArr而不是使用setOrders挂钩，我就能看到预期的数据。当我使用钩子时，它会不断地重新渲染。

Answer 1

您需要重构

1. 您的React Hook useEffect具有依赖项orders，它将无限次重新渲染
2. 等待之后的.then没有任何意义，要么去掉async/await，要么包括promise回调

const getUserOrders = () => {
API.getOrders(window.sessionStorage.id)
.then(res => setOrders(res.data.ordersArr))
.catch(err => console.log(err));
}
useEffect(() => {
if (logged_in) {
getUserOrders();
} else {
window.location.href = "/login";
}
}, [])

Answer 2

每次orders状态更改时，useEffect钩子都将重新运行，当useEffect钩子运行时，您将从API获取数据，然后设置orders。这反过来又触发了具有orders的新值的渲染，从而使useEffect调用无效，并导致其再次激发，最终导致无限循环。

您只想通过传递一个空的依赖项列表useEffect(..., [])来强制useEffect运行一次