React-useEffect中的无限循环问题

Question

我有一个通过 axios 获取数据的 useEffect()，我希望它只渲染一次，所以我传递了一个数组。一切正常，但问题是每当我尝试对项目进行排序时，第二个 useEffect 会触发，然后是第一个 useEffect，这会导致组件一次又一次地获取项目。

const [products, setProducts] = useState([]);

useEffect(() => {
    const getProducts = async () => {
      return await axios
        .get('/getAllProducts')
        .then((response) => {
          setProducts(response.data);
          console.log(products);
        })
        .catch((e) => {
          console.log(e);
        });
    };
    getProducts();
  }, [products]);

Answer 1

这是因为您传递了一个包含 products 状态的数组，而不是一个空数组，它将在状态更改时触发 useEffect（特别针对 products 状态）。尝试将您的代码更改为空数组：

useEffect(() => {
const getProducts = async () => {
  return await axios
    .get('/getAllProducts')
    .then((response) => {
      setProducts(response.data);
      console.log(products);
    })
    .catch((e) => {
      console.log(e);
    });
  };
  getProducts();
  }, []);

正如下面提到的@skyboyer，请注意状态不是以同步方式更新的。因此，console.log(products) 不会在 useEffect 运行时反映您的状态的准确值。

可以使用多个useEffect 挂钩。如果您想在控制台中查看更新后的状态，或者使用它做一些其他工作，您可以添加另一个 useEffect 钩子并将您的状态传递到数组中：

useEffect(() => {
    console.log(products);
}, [products]);

Answer 2

由于products 位于useEffect 依赖数组中，因此每次products 状态发生更改时都会运行它。 getProducts() 运行 setProducts 然后又会再次触发使用效果。在useEffect 中使用空数组将告诉它仅在组件安装时运行。

像这样：

useEffect(() => {
const getProducts = async () => {
  return await axios
    .get('/getAllProducts')
    .then((response) => {
      setProducts(response.data);
      console.log(products);
    })
    .catch((e) => {
      console.log(e);
    });
  };
  getProducts();
  }, []);