如何在 useEffect 内的侦听器内访问 state？

Question

我知道如果没有依赖项，您将无法在 useEffect 中访问useEffect 。 一个这样的例子：

 const [state, setState] = React.useState('')
 const ws = new WebSocket(`ws://localhost:5000`)

 React.useEffect(() => {
    ws.onopen = () => {
      console.log(state)
},[])

在这种情况下， state返回为空，即使它在代码的其他部分已更改。 为了原则上解决这个问题，我应该添加state作为 useEffect 挂钩的依赖项。 但是，这将再次触发监听器，我不想在我的websocket上有 2 个活动监听器，或者被迫关闭并再次重新打开它：

 React.useEffect(() => {
    ws.onopen = () => {
      console.log(state)
},[state])

在位于useEffect挂钩内的侦听器中访问state时，有什么好的做法？

Answer 1

试试这个方法：

  const [state, setState] = React.useState('');
  const stateRef = React.useRef(state);

  React.useEffect(() => {
    stateRef.current = state;
  }, [state])

  const ws = React.useMemo(() => {
    const newWS = new WebSocket(`ws://localhost:5000`);
    newWS.onopen = () => {
      console.log(stateRef.current);
    }
    return newWS;
  }, []);

这样，您只需创建一次ws ，它将使用 state 参考，由于useEffect ，该参考将是最新的。

如果您在 state 更新时不需要重新渲染组件，您可以删除const [state, setState] = React.useState(''); 和useEffect并在需要时像这样更新stateRef - stateRef.current = newValue;

Answer 2

最佳实践在侦听器中获取数据。[更新]！

const [socketData , setSocketData] = useState(null);
useEffect(() => {
  websocet.open( (data) => {
       setSocketData(data);
    })
},[])
//second useEffect to check socketData
  useEffect(() => {
   if(socketData){
     // access to data which come from websock et
   }
},[socketData])