React-useEffect 中存在无限循环问题

Question

我有一个 useEffect() 通过 axios 获取数据，我希望它只渲染一次，所以我传递了一个数组。一切正常，但问题是每当我尝试对项目进行排序时，第二个 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]);