Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data in React js

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data in React js

我花了很多时间来解决这个错误,或者也看到其他网站来解决这个问题,但没有找到解决方案,所以我需要帮助来解决这个错误

屏幕截图在这里 - https://i.stack.imgur.com/XbBJ5.jpg

我使用https://www.twilio.com/blog/video-chat-react-hooks创建视频应用程序,因为上述错误我没有进入房间

下面是代码。

import React, { useState, useCallback } from "react";
import Lobby from "./Lobby";
import Room from "./Room";
const VideoChat = () => {
  const [username, setUsername] = useState("");
  const [roomName, setRoomName] = useState("");
  const [token, setToken] = useState(null);

  const handleUsernameChange = useCallback((event) => {
    setUsername(event.target.value);
  }, []);

  const handleRoomNameChange = useCallback((event) => {
    setRoomName(event.target.value);
  }, []);

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = fetch("/video/token", {
      method: "POST",
      body: JSON.stringify({
        identity: username,
        room: roomName,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());
    setToken(data.token);
  };
  const handleLogout = useCallback((event) => {
    setToken(null);
  }, []);

  let render;
  if (token) {
    render = (
      <Room roomName={roomName} token={token} handleLogout={handleLogout} />
    );
  } else {
    render = (
      <Lobby
        username={username}
        roomName={roomName}
        handleUsernameChange={handleUsernameChange}
        handleRoomNameChange={handleRoomNameChange}
        handleSubmit={handleSubmit}
      />
    );
  }

  return render;
};

export default VideoChat;

这里是 Twilio 开发人员布道者。

正如 epascarello 指出的那样,当您发出获取令牌的请求时,您会收到 404 响应。

当您运行此应用程序时,您需要同时启动客户端应用程序和服务器。为此,您应该 运行

npm run dev

当你 运行 npm start 它只会 运行 React 应用程序,服务器应用程序不会 运行 并且你在向它。这一切都基于我在 creating a React application with a proxy to an Express server 上的博客 post,您可以在其中查看有关如何设置的详细信息。