尝试调用使用在useEffect内部更改的状态变量的函数对象，并获取未定义的状态变量

Question

由于在useEffect中设置了currentUser状态变量，因此getJoinRoom需要currentUser 因此我在具有依赖项currentUser状态的getJoinRoom上设置了useCallback，但是似乎在调用getJoinRoom时仍未设置currentUser

连接TypeError错误：无法读取未定义的属性'getJoinableRooms'

function App() {
  const [messages, setMessages] = useState([]);
  const [currentUser, setCurrentUser] = useState();
  const [joinableRooms, setJoinableRooms] = useState([]);
  const [joinedRooms, setJoinedRooms] = useState([]);

  const sendSimpleMessage = (text) => {
    // send simple text
    currentUser.sendSimpleMessage({
      text: text,
      roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72'
    });
  }

  const subscribeToRoom = (roomId) => {
    setMessages([]);
    currentUser.subscribeToRoomMultipart({
      // roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
      roomId: roomId,
      hooks: {
        onMessage: message => {
          // console.log('message object: ', message.parts[0].payload.content);
          setMessages(prevMessages => [...prevMessages, message]);
        }
      }
    })
  };

  const getJoinRoom = useCallback(() => {
    currentUser.getJoinableRooms()
      .then(joinableRooms => {
        setJoinableRooms(joinableRooms);
        setJoinedRooms(currentUser.rooms);
      }).catch(err => {
        console.log('Error on getting joinable rooms', err);
      });
  }, [currentUser])

  useEffect(() => {
    const chatManager = new ChatManager({
      instanceLocator: instanceLocator,
      userId: 'Henry',
      tokenProvider: new TokenProvider({
        url: tokenUrl
      })
    });

    chatManager.connect()
      .then(currUser => {
        setCurrentUser(currUser);

        //currUser.getJoinableRooms()
        //  .then(joinableRooms => {
        //    setJoinableRooms(joinableRooms);
        //    setJoinedRooms(currUser.rooms);
        //  }).catch(err => {
        //    console.log('Error on getting joinable rooms', err);
        //  });

        getJoinRoom();

      }).catch(err => {
        console.log('Error on connection', err)
      })

  }, [getJoinRoom]);

  return (
    <div className="app">
      <RoomList
        rooms={[...joinableRooms, ...joinedRooms]}
        subscribeToRoom={subscribeToRoom}
      />
      <MessageList messages={messages} />
      <SendMessageForm sendSimpleMessage={sendSimpleMessage} />
      <NewRoomForm />
    </div>
  );
}

export default App;

Answer 1

不是React开发人员。

您无法访问TDZ中的let/const声明的变量。改用函数声明。