Блог

я получил эту ошибку

 VM305:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
 

и я не знаю, почему. Мои данные json:

 [
  {
   "id": 1,
    "title": "Avatar",
    "distributor": "20th Century Fox",
    "year": 2009,
    "amount": "$2,787,965,087",
    "img": {
      "src": "media/avatar.jpg",
      "alt": "avatar"
    },
    "ranking": 1
  },
  {
    "id": 2,
    "title": "Titanic",
    "distributor": "20th Century Fox",
    "year": 1997,
    "amount": "$2,187,463,944",
    "img": {
      "src": "media/titanic.jpg",
      "alt": "titanic"
    },
    "ranking": 2
  },
  {
    "id": 3,
    "title": "Star Wars: The Force Awakens",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2015,
    "amount": "$2,068,223,624",
    "img": {
      "src": "media/star_wars_the_force_awakens.jpg",
      "alt": "star_wars_the_force_awakens"
    },
    "ranking": 3
  },
  {
    "id": 4,
    "title": "Avengers: Infinity War",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2018,
    "amount": "$2,048,359,754",
    "img": {
      "src": "media/avengers_infinity_war.jpg",
      "alt": "avengers_infinity_war"
    },
    "ranking": 4
  },
  {
    "id": 5,
    "title": "Jurassic World",
    "distributor": "Universal Pictures",
    "year": 2015,
    "amount": "$1,671,713,208",
    "img": {
      "src": "media/jurassic_world.jpg",
      "alt": "jurassic_world"
    },
    "ranking": 5
  }
]
 

 class List extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loading: true,
    };
  }

  async componentDidMount() {
    
    const movies = await fetch('../../assets/data.json');
    const moviesJSON = await movies.json();
  
    console.log(moviesJSON);
    if (moviesJSON) {
      this.setState({
        data: moviesJSON,
        loading: false,
      });
    }
  }

  render() {
    const { data, loading } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <div className='row'>
        {data.map(movie => (
          <div key={movie.id} className='col-sm-2'>
            <Card movie={movie} />
          </div>
        ))}
      </div>
    );
  }
}

export default List;
 

URL-адрес, по которому вы получаете json, почти наверняка не возвращает файл json, как вы думаете, а вместо этого отображает страницу с ошибкой HTML (которая начинается с < ). Добавьте a console.log(movies) после выборки, чтобы отладить это.

Кроме того, URL-адрес, который у вас есть, является путем (включая .. ), а не URL-адресом. Вопрос в том, где этот файл обслуживается вашим веб-сервером.

 const movies = await fetch('../../assets/data.json');
 

вместо этого вам следует импортировать json в верхней части файла

 import movies from '../../assets/data.json';
 

Затем вы можете получить доступ movies в componentDidMount. Поскольку это локальные данные, вам не нужно вызывать api

Вы получаете эту ошибку, когда fetch не возвращает допустимые данные json. Это строка, вызывающая ошибку.

 const moviesJSON = await movies.json();
 

Вы можете попробовать изменить movies.json() movies.text() и войти в систему, чтобы просмотреть данные.

 const moviesJSON = await movies.text();
console.log((moviesJSON));