反应 useSocket undefined is not iterable 错误答案

【问题标题】：react useSocket undefined is not iterable error反应 useSocket undefined is not iterable 错误
【发布时间】：2021-10-04 01:14:56
【问题描述】：

有简单的钩子useSocket。

const useSocket = (user) => {
   const socketRef = useRef(null);
   const socket = socketRef.current;
   const [connected, setConnected] = useState(false);
   const [state, dispatch] = useContext(AppContext);
   ........
}

在钩子的使用效果中我是初始化套接字连接

但是当我在功能组件中使用它时

const [socket, connected] = useSocket();

我收到 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

怎么了？任何其他钩子，如 useState - 没问题

P.S 在下面的堆栈帧中

dispatch(Actions.setUserData(data));

如果我评论 const [socket, connected] = useSocket();

一切正常

useSocket代码

const useSocket = (user) => {

  const socketRef = useRef(null);
  const socket = socketRef.current;
  const [connected, setConnected] = useState(false);
  const [state, dispatch] = useContext(AppContext);
        
        
  /** First of all it's necessary to handle the socket io connection */
  useEffect(() => {
    if (user === null) {
      if (socket !== null) {
        socket.disconnect();
      }
      setConnected(false);
    } else {
      if (socket !== null) {
        socket.connect();
      } else {
        socketRef.current =  io(window.location.origin.replace("3000", "3003")); 
      }
      setConnected(true);
    }
  }, [user, socket]);
        
        
  useEffect(() => {
    if (connected) 
    { //
        console.log('socket');
        socket.on("reconnect", (attempt) => {
              console.log('!!!reconnecting');
              //console.log(store);
              //console.log(store.getState());
        });         

        socket.on("connect", (attempt) => {
          console.log('!!!  connecting');
              

          if (state.data) {
            var uId = state.data.id;
            socket.emit('USER:ONLINE', uId)
          }
              
        });

        socket.on('SERVER:NEW_MESSAGE', fetchDialogsInt); 
    }
            // dispatch,connected,
        }, [user,  socket,dispatch,connected]
        );

    return socket;
}

【问题讨论】：

useSocket实现有问题，没有代码我们帮不了你
代码添加到主帖
如果你想调用它，你也应该从useSocket钩子返回connected。另一件事是我可以看到useSocket 需要user 变量。
固定连接返回和用户变量 - 相同的错误。堆栈是： 1. dispatch(Actions.setUserData(data)); 2. 功能组件的开始 3. const useSocket = (user) => { 4. _slicedToArray
您确定您已向我们提供了所有信息吗？例如，何时发生此错误？我注意到您将调度作为效果依赖项，但调度没有使用。你确定例如 fetchDialogsInt 定义了谁知道在哪里不使用一些过时的调度？

标签： reactjs sockets react-hooks

【解决方案1】：

可能会被发现。如果我在 useSocket 中评论这一行

const [state, dispatch] = useContext(AppContext);

替换成

const [state, dispatch] = useAppState();

没有错误。

钩子代码

const useAppStateContext = () => {
  return useReducer(reducer, initialState);
};


export const AppContext = createContext();

export const useAppState = () => {
  const [state, dispatch] = useContext(AppContext);
  return [state, dispatch];
};

为什么我对const [state, dispatch] = useContext(AppContext); 有错误？

【讨论】：