React 组件为一条路线正确获取 JSON，但为另一条路线正确获取 returns "You need to enable JavaScript to run this app"

Question

我有一个名为 Comments 的组件，它使用 useEffect() 来获取包含虚拟数据的本地 json 文件。 React-router 已设置，因此 /comments 端点直接呈现此组件。

另一条路线 /video/:watchId 改为呈现到包含 Comments 组件的组件。 /comments 端点工作完美，但视频端点中的相同 api 调用无法 return Json，并且我收到错误消息：“SyntaxError: Unexpected token < in JSON 在位置 0" 因为响应类型是 HTML 而不是 JSON.

我刚开始做出反应，所以我可能遗漏了一些明显的东西。怎么回事？

App.js:

import React, { Component, useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import '../styles/App.css';
import Home from './Home'
import Comments from './Comments'
import VideoPage from './VideoPage'

function App(){
  return (
    <Router>
      <Switch>
        <Route exact path="/"><Home/></Route>
        <Route path="/comments">
          <Comments video="watchId" top={true}/>
        </Route>
        <Route path="/video/:watchId">
          <VideoPage/>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

commentsApi.js:

export const getTopComments = (videoId) => {
    return fetch('data/topComments.json')
    .then( response => response.json());
}

export const getReplies = (parent) => {
    return fetch('data/commentReplies.json')
    .then( response => response.json());}

Comments.js:

import React, { useEffect, useState, useContext } from 'react';
import { getTopComments, getReplies } from '../apis/commentApi';
import CommentCard from './CommentCard'

const Comments = (props) => {

    const [comments, setComments] = useState([]);

    useEffect(() => {
        if(props.top){
            getTopComments(props.video)
            .then(cmts => {console.log(cmts); setComments(cmts); })
            .catch(error => console.log(error));
        }

        else{
            getReplies(props.video)
            .then(cmts => { setComments(cmts); })
            .catch(error => console.log(error));
        }
    }, [setComments]);
    
    return (
        comments
        ?
        comments.map(comment => <CommentCard key={ comment.id } comment={ comment } />)
        :
            <div>hell</div>
    );
}

export default Comments

VideoPage.js:

import React from "react";
import Comments from "./Comments"
import {useParams} from "react-router-dom";

const VideoPage = (props) => {
    const {watchId} = useParams()
    console.log(watchId)
    return (
        <div>
        hello world
        <Comments top={true} video={watchId}/>
        </div>
      );
}

export default VideoPage

注意：替换为来自 App.js 的确切调用没有帮助。

检查 /comments 路由时：

检查 /video/{anything} 路由时：

Answer 1

我通过如下更改 commentApi.js 文件解决了这个问题：

export const getTopComments = (videoId) => {
    console.log("top hit")
    return fetch(`${process.env.PUBLIC_URL}/data/topComments.json`,{
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
         }
      })
    .then( response => response.json());
}

export const getReplies = (parent) => {
    return fetch(`${process.env.PUBLIC_URL}/data/commentReplies.json`,{
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
         }
      })
    .then( response => response.json());
}

我仍然不知道为什么它之前工作不一致。

React 组件为一条路线正确获取 JSON，但为另一条路线正确获取 returns "You need to enable JavaScript to run this app"

React component fetches JSON correctly for one route, but returns "You need to enable JavaScript to run this app" for another

javascript

reactjs

react-router

react-hooks

use-effect