Question

我正在尝试向本地json文件发出提取请求，但出现此错误，提示Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0指向response.json()。我尝试添加代理package.json，但出现500个内部错误。我该怎么解决？

componentDidMount() {    
  fetch('http://localhost:3000/items.json')
  .then(function(response) {
    if (response.status >= 400) {
      throw new Error("Bad response");
    }
    return response.json();
  })
  .then(function(data) {
    console.log(data)
  });
}

json文件：

[
  {
    data: [
      {
        name: "cnt",
        level: "12"
      },
      {
        name: "stewart",
        level: "6"
      },
      {
        name: "nic",
        level: "7"
      }
    ]
  }
]

Answer 1

如果您正在使用Create React App，则没有其他可以运行JSON文件的后端运行。考虑使用Webpack导入它。

import data from './items.json';

class App extends React.Component {
  componentDidMount() {    
    console.log(data);
  }
  // ...
}

或者，您可以将文件放在public文件夹中，并且可以从同一来源获得它。

class App extends React.Component {
  componentDidMount() {
    fetch("/items.json")
      .then(response => {
        if (!response.ok) {
          throw new Error("Bad response");
        }
        return response.json();
      })
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }
  // ...
}

Answer 2

将文件而不是public放到src文件夹中。

react：未处理的拒绝（SyntaxError）：JSON中位置0处的意外令牌<

2 个答案: