使用效果导致无限循环

Question

我已经查看了SO中的每个无限循环答案，但我无法弄清楚我做错了什么。

我正在尝试获取一些数据并使用数据设置我的 productList 状态，但它会导致无限循环。

export default (props) => {
const [productsList, setProductsList] = useState([]);
const getProducts = async () => {
try {
await axios
.get("https://api.stripe.com/v1/skus", {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${StripeKey}`,
},
})
.then(({ data }) => {
setProductsList(data.data);
});
} catch {
(error) => {
console.log(error);
};
}
};
useEffect(() => {
getProducts();
}, [productList]);
return (
<ProductsContext.Provider value={{ products: productsList }}>
{props.children}
</ProductsContext.Provider>
);
};

我还尝试在useEffect结束时使用一个空数组，这导致它根本不设置状态。

我错过了什么？

编辑：

我从使用效果中删除了尝试/捕获和 [产品列表]

import React, { useState, useEffect } from "react";
import axios from "axios";
const StripeKey = "TEST_KEY";
export const ProductsContext = React.createContext({ products: [] });
export default (props) => {
const [productsList, setProductsList] = useState([]);
useEffect(() => {
axios({
method: "get",
url: "https://api.stripe.com/v1/skus",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${StripeKey}`,
},
})
.then((response) => {
setProductsList(response.data.data)
})
.catch((error) => {
console.log(error);
});
}, []);
return (
<ProductsContext.Provider value={{ products: productsList }}>
{props.children}
</ProductsContext.Provider>
);
};

Answer 1

关于如何获取数据： 我认为问题可能在于您如何获取数据：

如文档中所述，我认为您不应该在这里使用 try catch，而是像这样：

function MyComponent() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
// Note: the empty deps array [] means
// this useEffect will run once
// similar to componentDidMount()
useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.items);
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}

关于 useEffect 回调：

我认为您不应该使用 [productList]，因为它是您正在更新的项目，因此一旦您执行设置产品，它就会再次触发。当请求的 prop 发生变化或只是在组件上挂载时，您可能希望再次进行获取(如您所说为空数组(

此外，可能还有其他我们在该代码示例中看不到的副作用。也许你可以分享一个堆栈闪电战以确保