我正在尝试使用React useEffect
和useState
的事件发射器,但它总是获得初始状态而不是更新状态。如果我直接调用事件处理程序,即使使用setTimeout
,它也可以工作。
如果我将值传递给useEffect()
第二个参数,它会使它工作,但是每次值改变时(这会触发击键),这会导致重新订阅事件发射器。
我究竟做错了什么?我已经尝试过useState
,useRef
,useReducer
和useCallback
,并且无法正常工作。
这是一个复制品:
import React, { useState, useEffect } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import EventEmitter from "events";
let ee = new EventEmitter();
const initialValue = "initial value";
function App(props) {
const [value, setValue] = useState(initialValue);
// Should get the latest value, both after the initial server load, and whenever the Codemirror input changes.
const handleEvent = (msg, data) => {
console.info("Value in event handler: ", value);
// This line is only for demoing the problem. If we wanted to modify the DOM in this event, we would instead call some setState function and rerender in a React-friendly fashion.
document.getElementById("result").innerHTML = value;
};
// Get value from server on component creation (mocked)
useEffect(() => {
setTimeout(() => {
setValue("value from server");
}, 1000);
}, []);
// Subscribe to events on component creation
useEffect(() => {
ee.on("some_event", handleEvent);
return () => {
ee.off(handleEvent);
};
}, []);
return (
<React.Fragment>
<CodeMirror
value={value}
options={{ lineNumbers: true }}
onBeforeChange={(editor, data, newValue) => {
setValue(newValue);
}}
/>
{/* Everything below is only for demoing the problem. In reality the event would come from some other source external to this component. */}
<button
onClick={() => {
ee.emit("some_event");
}}
>
EventEmitter (doesnt work)
</button>
<div id="result" />
</React.Fragment>
);
}
export default App;
这是App2
中相同的代码沙箱:
https://codesandbox.io/s/ww2v80ww4l
App
组件有3种不同的实现 - EventEmitter,pubsub-js和setTimeout。只有setTimeout有效。
谢谢!
编辑:为了澄清我的目标,我只想让handleEvent
中的值在所有情况下都匹配Codemirror值。单击任何按钮时,应显示当前的codemirror值。而是显示初始值。
value
在事件处理程序中是陈旧的,因为它从定义它的闭包中获取其值。除非我们每次value
更改时重新订阅新的事件处理程序,否则它将不会获得新值。
解决方案1:为发布效果[value]
创建第二个参数。这使得事件处理程序获得正确的值,但也会导致效果在每次击键时再次运行。
解决方案2:使用ref
将最新的value
存储在组件实例变量中。然后,创建一个效果,除了每次value
状态更改时都会更新此变量。在事件处理程序中,使用ref
,而不是value
。
const [value, setValue] = useState(initialValue);
let refValue = useRef(value);
useEffect(() => {
refValue.current = value;
});
const handleEvent = (msg, data) => {
console.info("Value in event handler: ", refValue.current);
};
https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
看起来该页面上还有其他一些可能也有效的解决方案。非常感谢@Dinesh提供的帮助。
更新的答案。
问题不在于钩子。初始状态值已关闭并传递给EventEmitter并一次又一次地使用。
在handleEvent
中直接使用状态值不是一个好主意。相反,我们需要在发出事件时将它们作为参数传递。
import React, { useState, useEffect } from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import EventEmitter from "events";
let ee = new EventEmitter();
const initialValue = "initial value";
function App(props) {
const [value, setValue] = useState(initialValue);
const [isReady, setReady] = useState(false);
// Should get the latest value
function handleEvent(value, msg, data) {
// Do not use state values in this handler
// the params are closed and are executed in the context of EventEmitter
// pass values as parameters instead
console.info("Value in event handler: ", value);
document.getElementById("result").innerHTML = value;
}
// Get value from server on component creation (mocked)
useEffect(() => {
setTimeout(() => {
setValue("value from server");
setReady(true);
}, 1000);
}, []);
// Subscribe to events on component creation
useEffect(
() => {
if (isReady) {
ee.on("some_event", handleEvent);
}
return () => {
if (!ee.off) return;
ee.off(handleEvent);
};
},
[isReady]
);
function handleClick(e) {
ee.emit("some_event", value);
}
return (
<React.Fragment>
<CodeMirror
value={value}
options={{ lineNumbers: true }}
onBeforeChange={(editor, data, newValue) => {
setValue(newValue);
}}
/>
<button onClick={handleClick}>EventEmitter (works now)</button>
<div id="result" />
</React.Fragment>
);
}
export default App;
这是一个有效的codesandbox