向服务器发出请求时正确使用 useEffect

Question

我有一个 handleRating 函数，它设置了一些状态：

  const handleRating = (value) => {
    setCompanyClone({
      ...companyClone,
      prevRating: [...companyClone.prevRating, { user, rating: value }]
    });
    setTimeout(() => {
      handleClickOpen();
    }, 600);
  };

我认为还有一个函数可以使用新的 companyClone 值修补服务器：

  const updateServer = async () => {
    const res = await axios.put(
      `http://localhost:3000/companies/${companyClone.id}`,
      companyClone
    );

    console.log("RES", res.data);
  };

我的 updateServer 函数在 useEffect 中被调用。但我只想在状态更新后将函数运行。当我加载我的页面时，我看到了我的 res.data console.log。我不想在 comapanyClone.prevRating 数组更新之前向我的服务器发出请求。

我的使用效果：

  useEffect(() => {
    updateServer();
  }, [companyClone.prevRating]);

我怎么能运行页面加载时没有这个功能。但仅当 companyClone.prevRating 更新时？

Answer 1

为了防止在第一次渲染时调用函数，您可以使用 useRef 钩子，persists 数据通过重新渲染。

注意：useEffect不像didComponentMount那样提供检查当前更新数据与先前数据的杠杆作用，所以这样使用

这是代码示例。

https://codesandbox.io/s/strange-matan-k5i3c?file=/src/App.js

向服务器发出请求时正确使用 useEffect

Using useEffect properly when making reqs to a server

reactjs

use-effect

use-state