React Hook useEffect 缺少依赖项：“loadAllProducts”。 包括它或删除依赖数组 react-hooks/exhaustive-deps

Question

导出默认值 function Home() {

const [products, setProducts] = useState([]);
const [error, setError] = useState(false);

const loadAllProducts = React.useCallback(() => {
    getProducts()
    .then(data => {
        if (data.error) {
            setError(data.error);
            console.log(error);
        } else {
            setProducts(data);
        }
    });
},[]);

useEffect(() => {
    loadAllProducts();
}, [loadAllProducts]);



return(
    <div>
        <h1>Home Component</h1>
        <div className="row">
            {products.map( (product, index) => {
                return(
                    <div key={index}>
                        <h1>{product}.name</h1>
                    </div>
                );
            })}
        </div>
    </div>
);

}

执行上述代码后出现此错误 React Hook React.useCallback 缺少依赖项：'error'。 包括它或删除依赖项数组。

Answer 1

export default function Home() {

const [products, setProducts] = useState([]);
const [error, setError] = useState(false);

const loadAllProducts = React.useCallback(() => {
    getProducts()
    .then(data => {
        if (data.error) {
            setError(data.error);
            console.log(error);
        } else {
            setProducts(data);
        }
    });
},[error]);

useEffect(() => {
    loadAllProducts();
}, [loadAllProducts]);

就像警告所说的那样传递依赖项，但在您的情况下，此依赖项是 function 因此最好将其包装在 useCallback 中，否则您会收到另一个警告。