Javascript 更新后无法访问计数器

我想通过点击一个按钮来开始一段时间间隔。 在这里，间隔开始，但我无法访问计数器的值。因为当计数器等于5时，应该停止间隔

以下是一个例子：

let interval = null;
const stateReducer = (state, value) => value;

function App(props) {

  const [counter, setCounter] = useReducer(stateReducer, 0);

  const increment = () => {

    interval = setInterval(() => {
      setCounter(counter + 1);
      if (counter === 5) clearInterval(interval);
      console.log(counter);
    }, 1000);

  };

  return (
    <div>
      <p>{counter}</p>
      <button className="App" onClick={increment}>
        Increment
      </button>
    </div>
  );
}

您可以在上运行此代码

change const stateReducer=state，value=>value；保持 stateReducer=state，value=>state+value； 使变量let current_counter=0；外部功能 像这样改变你的增量函数 多恩 change const stateReducer=state，value=>value；保持 stateReducer=state，value=>state+value； 使变量let current_counter=0；外部功能 像这样改变你的增量函数 多恩

---

您的代码有一些问题

你的减速机申报单

你是怎么设置减速器的

你是如何安排你的行动的

间隔是必需的代码，在React的处理程序中声明间隔时不必担心闭包。您可以使用click only标记间隔应该开始并处理useffect中的所有命令代码。下面是一个工作示例

const initialState = { value: 0 };
const reducer = (state, action) => {
  if (action.type === "INCREMENT")
    return {
      value: state.value + 1
    };
};
function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const [clicked, setClicked] = React.useState(false);

  useEffect(() => {
    let interval = null;
    if (clicked) {
      interval = setInterval(() => {
        dispatch({ type: "INCREMENT" });
      }, 1000);
    }
    if (state.value > 4) clearInterval(interval);

    return () => clearInterval(interval);
  }, [clicked, state]);

  return <button onClick={() => setClicked(true)}>{state.value}</button>;
}

---

如果您对闭包和react如何处理命令式代码感到好奇，请看Dan Abramov关于效果的最详细解释

您的代码有一些问题

你的减速机申报单

你是怎么设置减速器的

你是如何安排你的行动的

间隔是必需的代码，在React的处理程序中声明间隔时不必担心闭包。您可以使用click only标记间隔应该开始并处理useffect中的所有命令代码。下面是一个工作示例

const initialState = { value: 0 };
const reducer = (state, action) => {
  if (action.type === "INCREMENT")
    return {
      value: state.value + 1
    };
};
function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const [clicked, setClicked] = React.useState(false);

  useEffect(() => {
    let interval = null;
    if (clicked) {
      interval = setInterval(() => {
        dispatch({ type: "INCREMENT" });
      }, 1000);
    }
    if (state.value > 4) clearInterval(interval);

    return () => clearInterval(interval);
  }, [clicked, state]);

  return <button onClick={() => setClicked(true)}>{state.value}</button>;
}

---

---

如果您对闭包和react如何处理命令式代码感到好奇，请看Dan Abramov关于效果的最详细解释

这还不清楚。你能解释一下预期的行为吗？@Muhammad你在找这个吗？@Dupocas，编辑。这不清楚。你能解释一下预期的行为吗？@Muhammad你在找这个吗？@Dupocas，编辑。谢谢，但这不是一个好的解决方案，因为我在每次更新中都使用Effect。谢谢，但这不是一个好的解决方案，因为我在每次更新中都使用Effect。谢谢，我会试试这个谢谢，我会试试这个谢谢，但在这里，每次更新时都会调用use effect，并创建新的间隔引用。因为我只是举了一个简单的例子，而我的主代码是一个大代码。只有在状态和单击发生更改时才会调用它。您选择的答案将在以后引起问题。你根本不需要在handler中声明命令式代码谢谢你我勾选的问题，对我也有用。但我不知道它的性能。性能不是这里唯一的问题。例如，如果卸载了组件，则永远不会清理间隔。单击按钮后，尝试装载/卸载组件。你的应用程序将崩溃。说真的，对你有用的答案实际上是一个糟糕的建议。闭包在时间间隔内混乱不堪，更新无法成批进行。使用useEffect处理命令式代码还有另一个useEffect，在卸载时我正在清除间隔谢谢，但是在这里，每次更新和新的间隔引用都会调用use effect。因为我只是举了一个简单的例子，而我的主代码是一个大代码。只有在状态和单击发生更改时才会调用它。您选择的答案将在以后引起问题。你根本不需要在handler中声明命令式代码谢谢你我勾选的问题，对我也有用。但我不知道它的性能。性能不是这里唯一的问题。例如，如果卸载了组件，则永远不会清理间隔。单击按钮后，尝试装载/卸载组件。你的应用程序将崩溃。说真的，对你有用的答案实际上是一个糟糕的建议。闭包在时间间隔内混乱不堪，更新无法成批进行。使用useEffect处理命令代码还有另一个useEffect，卸载时我正在清除间隔

const initialState = { value : 0 }

const reducer = (state, action) =>{
    if(action.type === 'INCREMENT') return { value : state.value + 1 }

    return state
}

const [state, dispatch] = useReducer(reducer, initialState)

const initialState = { value: 0 };
const reducer = (state, action) => {
  if (action.type === "INCREMENT")
    return {
      value: state.value + 1
    };
};
function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const [clicked, setClicked] = React.useState(false);

  useEffect(() => {
    let interval = null;
    if (clicked) {
      interval = setInterval(() => {
        dispatch({ type: "INCREMENT" });
      }, 1000);
    }
    if (state.value > 4) clearInterval(interval);

    return () => clearInterval(interval);
  }, [clicked, state]);

  return <button onClick={() => setClicked(true)}>{state.value}</button>;
}