错误：在服务器上调用“JoinRoom”时发生意外错误

Question

我使用 react 和 asp.net core SignalR Services 创建了一个聊天应用程序。但我收到一条错误消息，提示“错误：在服务器上调用 'JoinRoom' 时发生意外错误。”

仅在浏览器控制台上使用它，我在服务器端没有收到任何错误。

JoinRoom 方法可用的我的 React App.js 代码如下所示：

const currentUser = JSON.parse(localStorage.getItem('user'));
  const [connection, setConnection] = useState();
  const [messages, setMessages] = useState([]);
  const [users, setUsers] = useState([]);
  let user;
  let room;

  const joinRoom = async () => {
    try {
      if (localStorage.getItem("user") === null) {
        user = "test";
        room = 1;
      }
      else{
        user = currentUser.name;
        room = currentUser.groupId;
      }
      const connection = new HubConnectionBuilder()
        .withUrl("https://localhost:44316/chat")
        .configureLogging(LogLevel.Information)
        .build();

      connection.on("ReceiveMessage", (user, message) => {
        setMessages(messages => [...messages, { user, message }]);
      });

      connection.on("UsersInRoom", (users) => {
        setUsers(users);
      });

      connection.onclose(e => {
        setConnection();
        setMessages([]);
        setUsers([]);
      });

      await connection.start();
      await connection.invoke("JoinRoom", { user, room });
      setConnection(connection);
    } catch (e) {
      console.log(e);
    }
  }

  const sendMessage = async (message) => {
    try {
      await connection.invoke("SendMessage", message);
    } catch (e) {
      console.log(e);
    }
  }

  const closeConnection = async () => {
    try {
      await connection.stop();
    } catch (e) {
      console.log(e);
    }
  }

  useEffect(() => {
    joinRoom();
  }, []);

  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/notify"  component={Notify} />
      <Route exact path="/chat"  render={(props) => <Chat {...props} sendMessage={sendMessage} messages={messages} users={users} closeConnection={closeConnection} />}/>      
      <Route exact path="/groups"  component={Groups} />
      <Route exact path="/sendnotify"  component={SendNotification} />

      <Route component={Error} />
    
    </Switch>
  );
}

Answer 1

首先，在组件挂载时对您想要运行的东西做出反应，我们使用useEffect 方法，不要在组件内执行joinRoom(); 之类的函数。 所以你应该添加：

 useEffect(() => {
    joinRoom();
  }, []);

在组件的顶部。