useState 的值因数组而异

Question

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

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

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

文本中的示例流程
(输入值) 1 -> (点击) 添加 -> (列表包含) 1
(输入值) 2 -> (点击) 添加 -> (列表包含) 1, 2
(输入值) 2 -> (点击) 删除 -> (列表包含) 1
(输入值) 2 -> (点击) Clean -> (List contains) empty
直到这一刻一切都很好

现在尝试点击红框外输入 'a' 让我们说。一些以前的值以某种方式进入列表。

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

怎么可能，怎么办？

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

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

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

Answer 1

您正在使用 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

useState 的值因数组而异

The value of useState varies for array

reactjs

react-hooks