时间戳

首页 > 解决方案 > 在 useState 回调中分配时反应 useRef 当前值触发两次

reactjs - 在 useState 回调中分配时反应 useRef 当前值触发两次

问题描述

问题

单击按钮时，会跳过参考电流值的输出。请参阅下面的输出以供参考。但是，如果在toggle.current = current + 1useState 回调之外，它会相应地工作。

代码

import "./styles.css";
import { useState, useRef } from "react";

export default function App() {
  const [array, setArray] = useState(["a"]);
  const toggle = useRef(1);

  const handleChange = () => {
    setArray((a) => {
      let current = toggle.current;
      console.log(current);
      toggle.current = current + 1;
      return [...a, "a"];
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => handleChange()}>hi</button>
    </div>
  );
}

期望的输出

1
2
3
4
5
6

实际输出

1
2
4
6
8

标签： reactjsuse-ref

解决方案

您必须使用StrictMode。

StrictMode将故意双重调用“渲染”和其他一些生命周期方法来检测副作用。严格模式检查仅在开发模式下运行；它们不会影响生产构建。

这是一个代码片段/演示。

推荐阅读