渲染组件后不会运行 useEffect 吗？

Question

我正在尝试设置一个事件在useEffect:

useEffect(() => {
var input = document.getElementById("emailInput");
console.log(input); // null when reloading page!

input.addEventListener("keyup", function(event) {
console.log(event);
if (event.key === 'Enter')
onLogin();
});
}, []);

当我重新加载页面时，对input.addEventListener的调用失败，因为input的值是null。我的理解是，useEffect在组件渲染后运行，所以id="emailInput"的输入元素应该已经存在了。我错过了什么?

更新:我是根据useEffect中分配的东西有条件地渲染元素。我没有在问题中显示这部分，但没有显示的部分是问题…

Answer 1

你正在做的应该工作，所以我怀疑是拼写错误。

然而，作为一般规则，如果emailInput是你的React应用程序的一部分，你应该在ref.

中存储对输入的引用。

const inputRef = useRef();
useEffect(() => {
// do stuff with inputRef.current
}, [])
return <div><input ref={inputRef} /></div>

更好的是，根据你的例子，如果emailInput是你React应用的一部分，你可以直接添加一个onKeyUp作为道具。这样你可以跳过refs和useEffect

return <div><input onKeyUp={handleKeyUp} /></div>

Answer 2

如果你没有其他问题(如输入字段等)的地方,而不是删除事件可能会导致这个问题。

尝试像这样清理您的事件侦听器。

useEffect(() => {
var input = document.getElementById("emailInput");
console.log(input); // null when reloading page!
const yourFunc = (event) => {
console.log(event);
if (event.key === 'Enter') console.log('hello')
}

input.addEventListener("keyup", yourFunc);
return () => input.removeEventListener('keyup', yourFunc)
}, []);

Answer 3

是useEffect在组件渲染后运行