时间戳

首页 > 解决方案 > useState 的值因数组而异

reactjs - useState 的值因数组而异

问题描述

我正在尝试使用 React 挂钩来管理列表并将其保存到 localStorage。现在，直到我尝试在函数（组件）的主要上下文之外调用添加之前，一切都运行良好。

看一下代码：https ://repl.it/repls/AjarDistortedWeb

使用按钮将项目添加到列表时一切顺利（有一些额外的 console.log 语句来跟踪正在发生的事情）。在红色框外单击以添加项目时，一切都会中断。

文本中的示例流程
（输入值）1 ->（单击）添加 ->（列表包含）1
（输入值）2 ->（单击）添加 ->（列表包含）1、2
（输入值）2 ->（单击）删除->（列表包含）1
（输入值）2->（单击）清理->（列表包含）清空
一切都很好，直到此刻

现在尝试用输入“a”点击红色框外，假设。一些以前的值以某种方式进入列表。

实际上，似乎单击按钮和单击外部会跟踪它们自己的值。

这怎么可能，该怎么办？

我尝试移动碎片（到不同的文件，都在一个文件中）。还尝试使用“useEffect”，但不确定在此示例中将其放置在何处

  useOutsideClick(mainRef, () => {
    if (searchInputRef.current) {
      addHistoryEntry(searchInputRef.current.value);
    }
  });

这是负责处理外部点击的代码

标签： reactjsreact-hooks

解决方案

您正在创建一个事件，useEffect但仅在组件安装时才这样做。通过[]作为第二个参数传入，您最终会创建click在第一次渲染后以陈旧对象引用结束的事件。

改变：

  useEffect(() => {
    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  }, []);

至：

  useEffect(() => {
    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  });

我所做的只是删除第二个参数。这将删除旧事件并在每次组件呈现时使用正确的引用创建一个新事件。

我清理了一些其他的东西，比如不使用引用来获取输入值。https://repl.it/repls/NewEnragedScope

推荐阅读