我正在按照网络上的一个教程来学习useRef钩子,它基本上工作得很好,除了它不能打印2,尽管之后它的行为正常.让我知道我到底做错了什么.

在示例代码中,我希望使用useRef计算组件的重新呈现次数.现在,如果您在输入框中输入一些内容,您会注意到它不会呈现2个REST,所有它将打印的数字.

Code -

const InputField = () => {
  const [val, setVal] = useState("");
  const comRef = useRef(1);

  useEffect(() => {
    comRef.current = comRef.current + 1;
  });

  return (
    <div className="fieldset-input-textbox">
      <input type="text" value={val} onChange={(e) => setVal(e.target.value)} />
      <div className="">
        This Component rendered {comRef.current}
        {`${comRef.current > 1 ? " times" : " time"}`}.
      </div>
    </div>
  );
};

export default InputField;

代码Sandbox LINK-https://codesandbox.io/s/busy-paper-f2qdhs?file=/src/InputField.js:54-542

推荐答案

您将根组件包装在<React.StrictMode>中,因此在开发过程中,Reaction将在初始挂载时呈现组件两次,以帮助捕获意外的杂质.

这会导致该效果运行两次,因此在挂载组件后,comRef.current将变为3.更改参照不会导致重新渲染,因此直到在文本字段中键入才会显示此新值,这将更新val状态.然后,它将显示3,在此之后将运行下一个效果.

Javascript相关问答推荐

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

React状态变量在使用++前置更新时引发错误

获取加载失败:获取[.]添加时try 将文档添加到Firerestore,Nuxt 3

JS生成具有给定数字和幻灯片计数的数组子集

materialized - activeIndex返回-1

通过在页面上滚动来移动滚动条

在拖放时阻止文件打开

将核心模块导入另一个组件模块时存在多个主题

如何创建返回不带`new`关键字的实例的类

让chart.js饼图中的一个切片变厚?

变量在导入到Vite中的另一个js文件时成为常量.

令牌JWT未过期

Google脚本数组映射函数横向输出

使用Document.Evaluate() Select 一个包含撇号的HTML元素

如何用javascript更改元素的宽度和高度?

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

更改agGRID/Reaction中的单元格格式

select 2-删除js插入的项目将其保留为选项

按特定顺序将4个数组组合在一起,按ID分组

Firebase函数中的FireStore WHERE子句无法执行