Question

我正在使用react并致力于在组件中获取json文件。

我想使用fetch获取input.json文件，但它不是控制台中的数据。为什么会这样，如何获取数据？

input.json

{
    "formId": 1,
    "title": "from",
    "items": [{
      "itemId": 1,
      "title": "style",
      "formType": 1,
      "options": [{
        "id": 1,
        "text": "one"
      }, {
        "id": 2,
        "text": "two"
      }, {
        "id": 3,
        "text": "three"
      }]
    }

App.js

import React from 'react';
import './App.css';
import inputData from './assets/input.json';

function App() {

  const getData = () => {
    fetch(inputData).then(response => {
               return response;
             }).then(data => {
               console.log(data);
             }).catch(err => {
               console.log(err)
             });
  }

  getData();

  return (
    <div className="App">
      <h2>Fetch</h2>
    </div>
  );
}

export default App;

console.log

Answer 1

尝试一下

import React from 'react';
import './App.css';
import inputData from './assets/input.json';

function App() {

  const getData = () => {
    fetch(inputData).then(response => {
                console.log(response);
                console.log(response.data);
              }) catch (err => console.log("err",err))
  }

  getData();

  return (
    <div className="App">
      <h2>Fetch</h2>
    </div>
  );
}

export default App;

Answer 2

您在获取结果时缺少某些内容，应该是

 fetch(inputData).then(response => {
            response.json().then(data => {
            console.log(data);
          }).catch(err => {
            console.log(err)
          });

Answer 3

您尝试解析对json格式的响应吗？

类似这样的东西：

import inputData from '../assets/input';

const getData = () => {
 fetch(inputData).then(response => {
const result = response.json()
            return result;
          }).then(data => {
            console.log(data);
          }).catch(err => {
            console.log(err)
          });
}

如何在React中使用Fetch获取JSON数据

3 个答案: