时间戳

首页 > 解决方案 > 在我的反应应用程序中对状态变量所做的更改未更新为子函数调用

javascript - 在我的反应应用程序中对状态变量所做的更改未更新为子函数调用

问题描述

const [ change , setChange ] = useState(0);
const funct = () => {
    if (change === 100){
        return 0;
    }
    setChange((pre) => {
        return pre + 10
    });
    funct()
}

如果我在任何事件发生时调用函数fuct()，它将不得不调用自身（递归函数），直到变化的值变为 100。但这里函数无限运行（无限递归）。这是因为状态变量在setChange()调用的每一刻都没有改变。

为什么 ？为什么状态在递归函数调用之间没有改变？

标签： javascriptreactjsrecursionstatejsx

解决方案

为什么 ？为什么状态在递归函数调用之间没有改变？

由于funct()是通过基于 React 的事件触发的，因此状态更新是批处理的。

为了不批量更新状态，触发器应该在基于 React 的事件之外，比如setInterval().

话虽如此，这里有一个使用useEffect()钩子的例子setInterval()。

const {useState, useEffect} = React;

const App = (props) => {
  const [change, setChange] = useState(0);
  
  useEffect(() => {
    const t = setInterval(() => (
      setChange((change) => (change + 10))
    ), 1000);
    
    return () => clearInterval(t);
  }, [change]);
  
  return (
    <div>{`Change: ${change}`}</div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

推荐阅读