React Restful API делает проблемы с json - PullRequest
Новая
       5

React Restful API делает проблемы с json

0 голосов
/ 08 января 2020

Я пробовал разные вещи, но это первый раз, когда это происходит. Я трачу несколько дней на Google и YouTube, чтобы найти что-то, но ничего не работает, ни одно мнение, ни много всего вместе или какие-то комбинации. 

import React, { Component } from "react";

class App extends Component {
  componentDidMount() {
    fetch("../public/data.json")
      .then(res => res.json())
      .then(data => 
        console.log(data);
      );
  }
  render() {
    return <div></div>;
  }
}
export default App;

И ошибка:

Uncaught (в обещании) SyntaxError: неожиданный токен

Ответы [ 4 ]

1 голос
/ 08 января 2020

Если вы хотите получить данные из локального файла json, вам не нужно использовать метод fetch. Вы можете просто import ваш файл.

Таким образом, вам не нужно использовать fetch метод в вашем componentDidMount. В будущем, если вы хотите использовать метод fetch, вы должны помнить, что fetch принимает URL. Я предоставляю вам действительный URL, чтобы показать вам пример. 

import React, { Component } from "react";
import json from "../public/data.json";

class App extends Component {
  componentDidMount() {
    fetch("https://randomuser.me/api/?results=10")
      .then(res => res.json())
      .then(data => 
        console.log(data);
      );

    console.log(json); // print your Json file
  }
  render() {
    return <div></div>;
  }
}
export default App;
0 голосов
/ 08 января 2020

В отличие от других ответов, fetch("../public/data.json") является действительным URL. Единственная проблема заключается в том, что он берет текущий URL в браузере, go на один уровень вверх (например, удаляет контент после последнего /) и добавляет public/data.json, затем пытается извлечь ресурс. Таким образом, ошибка Unexpected token < in JSON at position 0 возникает из-за попытки анализа html (скорее всего <!doctype html> как json

0 голосов
/ 08 января 2020

Вы можете просто использовать 'require' для импорта файла JSON, если он локальный.

Например: const data = require('../public/data.json'). console.log (data) вернет весь объект JSON.

Редактировать: Следует помнить, что require () всегда будет кэшировать содержимое загруженного модуля (или файла, в данном случае). В следующий раз, когда require () будет вызван снова, он восстановит его из кеша, вместо того, чтобы читать снова.

0 голосов
/ 08 января 2020

Вы даете своему вызову fetch относительный путь к файлу. Это должна быть ваша конечная точка API. 

componentDidMount() {
    fetch("../public/data.json") // this needs to be a url
      .then(res => res.json())
      .then(data => 
        console.log(data);
      );
  }

, если у вас уже есть файл JSON локально и вы хотите, чтобы ваш компонент React имел к нему доступ, тогда просто импортируйте его import jsonData from "../public/data.json"

...