Question

我正在尝试使用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);
    }
  });

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

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的值因数组

1 个答案: