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

Question

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

屏幕截图在这里 - 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;

Answer 1

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

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

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

npm run dev

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

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

javascript

node.js

reactjs

react-hooks

twilio-video