Question

const [urlList, setUrlList] = useState(0);

const callDayList = () => {
    console.log(urlList);
    Axios.post('http://localhost:3001/api/get', {
        passNum: urlList,
    });
};
useEffect(callDayList, [urlList]);

<td>
  <Link to={"/study/"+item.num} 
        onClick={function() {
                     setUrlList(item.num);
                     // num = item.num
                 }}
  >{item.title}</Link>
</td>

这段代码正在向后端发送一个状态，即 urlList，我遇到了一些问题。

当我研究 useEffect 时，它仅在 urlList 更改其值时才执行。但是当我点击一个 url 时，它一直传递 urlList 的初始值，即 0。

为了检查urlList是否正确更改，我将Link中的更改为“/”，并在callDayList中看到了console.log(urlList)的结果，当我单击时，它显示了正确的状态值，但是如果将Link调回，并点击，urlList的值还是初始值，发送给后端。

callDayList 必须在 urlList 改变它的值时执行，我不明白为什么它一直传递状态的初始值。

Answer 1

useEffect 将在第一次设置以及发生任何变化时运行。

如果你想避免这个初始运行，你可以尝试使用 useRef 变量来跟踪它是否是第一次运行：

import { useState, useRef, useEffect } from 'react';

const isFirstRun = useRef(true);
const callDayList = () => {
  if (isFirstRun.current) {
    isFirstRun.current = false;
    return;
  }
  // do your effect
  Axios.post('http://localhost:3001/api/get', {
      passNum: urlList,
  });

  return () => { isFirstRun.current = true; }
};
useEffect(callDayList, [urlList, isFirstRun]);

它看起来很麻烦，但应该可以让您获得所需的行为。如果您最终需要在代码中的多个地方跳过 useEffect 的初始运行，则可能值得将此行为提取到 custom hook 中。

即使状态没有改变，useEffect 也会执行

1 个答案: