React useEffect 未针对默认状态触发答案

【问题标题】：React useEffect not being triggered for default stateReact useEffect 未针对默认状态触发
【发布时间】：2022-11-11 03:02:56
【问题描述】：

当我尝试将页面设置为刷新功能的默认值时，它不会触发 useEffect 挂钩。但是，如果我第二次运行刷新功能，它就可以正常工作。这段代码也适用于其他值，如 2、3、4、5......

  const [goal, setGoal] = useState();
  const [page, setPage] = useState(1);
  const [temp, setTemp] = useState([]);

  useEffect(() => {
    setGoal();
    getData();
  }, [page]);

  const refresh = () => {
    setTemp([]);
    setPage(1);
  };

【问题讨论】：

这就是 react 的工作方式，如果您设置的值与 state 已有的值相同，react 将不会运行重新渲染周期。所以第二次点击刷新，仍然有 1 作为新值将永远不会触发 useEffect。你真的确定当你第二次点击你的按钮时它会运行useEffect吗？
你能告诉我你怎么称呼你的刷新吗

标签： javascript node.js reactjs react-hooks

【解决方案1】：

如果页面已经有值“1”那么刷新不会触发useEffect，“page”状态必须有一些其他值才能使“setPage(1)”更新它，然后如果状态更新它会触发useEffect。

【讨论】：

是的，但是如果page的当前值为10，仍然setPage(1)不会触发useEffect
好吧，代码块看起来不错。如果您提供更多代码参考，则可以确定问题。
那么你调用刷新函数的方式一定有问题。我尝试了this react playground，复制粘贴了您的代码并添加了一个按钮来触发刷新。如果您设置与默认值相同的值，它永远不会命中 useEffect。如果默认值为 10，它也会执行 useEffect，并且您在刷新时将其设置为 1。与您提到的行为非常相反。你如何调用你的刷新功能？

【解决方案2】：

出于“刷新”的目的，在 React 中准确地分离状态以触发重新渲染周期实际上是一个更好的主意

const [counter, setCounter] = useState(0)

const refresh = () => setCounter(counter + 1)

然后让你的useEffect 依赖于计数器值

【讨论】：

【解决方案3】：

 const [refresh, setRefresh] = useState(false);

 useEffect(() => {
    setGoal();
    getData();
 }, [refresh]);

  //whenever you want to refresh just use this 
  setRefresh(!refresh)

【讨论】：