Блог

У меня есть компонент под названием Comments, который использует useEffect() для извлечения локального файла json с фиктивными данными. React-маршрутизатор настроен таким образом, чтобы конечная точка /comments отображала этот компонент напрямую.

Другой маршрут, /video/:watchId, вместо этого отображает компонент, содержащий компонент комментариев. Конечная точка /comments работает отлично, но тот же вызов api в конечной точке видео не возвращает 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, не помогает.

При проверке маршрута /комментарии:

При проверке маршрута /видео/{что угодно} :

Я исправил эту проблему, изменив 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());
}
 

Я до сих пор не знаю, почему раньше это работало непоследовательно.