React组件调用Chat组件时报「函数未定义」错误求助

根本原因 #

你在App.js中使用了<Chat>组件，但没有导入Chat.js文件，导致React无法识别这个组件，抛出「函数未定义」的错误。

修复步骤 #

在App.js的导入区域添加Chat组件的导入语句（确保路径和你的文件结构匹配，若Chat.js和App.js在同一目录下，路径直接写./Chat即可）：

import './App.css';
import io from "socket.io-client";
import React, { useEffect, useState } from "react";
// 新增Chat组件导入
import Chat from './Chat';

const socket = io.connect("http://localhost:3001");

// 剩余代码保持不变
function App() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");

  const joinRoom = () => {
    if (username !== "" && room !== "") {
      socket.emit("join_room", room);
    }
  };

  return (
    <div className="App">
      <h3>Join A Chat</h3>
      <input type="text" placeholder="John..." onChange={(event) => {setUsername(event.target.value)}} />
      <input type="text" placeholder="Room ID..." onChange={(event) => {setRoom(event.target.value)}} />

      <button onClick={joinRoom}>Join A Room</button>

      <Chat socket={socket} username={username} room={room}></Chat>
    </div>
  );
}
export default App;

可选优化 #

目前Chat组件会默认显示，即使用户还没加入房间。可以添加状态控制组件的显示逻辑，提升体验：

function App() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");
  // 新增状态标记是否已加入房间
  const [isJoined, setIsJoined] = useState(false);

  const joinRoom = () => {
    if (username !== "" && room !== "") {
      socket.emit("join_room", room);
      setIsJoined(true);
    }
  };

  return (
    <div className="App">
      {!isJoined ? (
        <>
          <h3>Join A Chat</h3>
          <input type="text" placeholder="John..." onChange={(event) => {setUsername(event.target.value)}} />
          <input type="text" placeholder="Room ID..." onChange={(event) => {setRoom(event.target.value)}} />
          <button onClick={joinRoom}>Join A Room</button>
        </>
      ) : (
        <Chat socket={socket} username={username} room={room} />
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Jaxon Holcomb