React - 將所有數據從 json 加載到組件中

Question

我正在使用 React 並嘗試將數據從本地 json 文件加載到我的組件中。 我正在嘗試打印所有信息，包括名稱：值對（不僅僅是值）中的“名稱”，以使其看起來像一個表單。

我正在尋找最好的方法來做到這一點。 我需要解析嗎？ 我需要使用地圖功能嗎？ 我是 React 的新手，所以請向我展示帶有代碼的解決方案。 我見過與此類似的其他問題，但它們包含許多我認為不需要的其他代碼。

我的代碼示例：test.json

{"person": {
  "name": "John",
  "lastname": "Doe",
  "interests":
  [
    "hiking",
    "skiing"
  ],
  "age": 40
}}

測試.js

import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           ) 
      }
};

export default Test;

我需要允許我從 json 導入的代碼和顯示所有字段的組件內部代碼。

Answer 1

如果你的 json 存儲在本地，你不必使用任何庫來獲取它。 只需導入它。

import React, {Component} from 'react';
import test from 'test.json';

class Test extends Component {
  render () {
    const elem = test.person;
    return (
     <ul>
       {Object.keys(elem).map((v, i) => <li key={i}>{v} {test[v]}</li> )}
     </ul>
    )
  }
};

export default Test;

Answer 2

要關心的第一個重要問題是你想如何獲得這個 JSON，如果我非常理解你的問題，它就是一個本地 JSON 文件。 所以你需要在你的應用程序中運行一個本地服務器來獲取這些值。

我推薦使用 node.js 制作的live-server 。

之后你可以使用axios來獲取數據然后......

import React, {Component} from 'react';
import axios from 'axios';

constructor (props) {
   this.state = {
         items: [],
   }
   axios.get('http://localhost:8080/your/dir/test.json') 
    .then(res => {
        this.setState({ items: res.data });  
   });
}
class Test extends Component {
    console.log(this.state.items);
    render () {
      return (

           ) 
      }
};

export default Test;

我已經在渲染之前放了一個 console.log 來顯示你的對象，然后做任何你想做的事！

Answer 3

使用 JSON.parse( json ) 示例：

JSON.parse(`{"person": {
    "name": "John",

    "lastname": "Doe",
    "interests": [
        "hiking",
        "skiing"
    ],
    "age": 40
}}`);

Answer 4

您好，最好的解決方案是使用 Axios。

https://github.com/mzabriskie/axios

嘗試查看他們的 API，它非常簡單。

是的，您可能需要一個映射函數來循環解析的數據。

我這里有一個示例代碼，我使用了 Axios。

import axios from 'axios';
const api_key = 'asda99';
const root_url = `http://api.jsonurl&appid=${api_key}`;

export function fetchData(city) {    //export default???
  const url = `${root_url}&q=${city},us`;
  const request = axios.get(url);
}

request 是您獲取解析數據的地方。 繼續玩吧

這是另一個使用 ES5 的例子

componentDidMount: function() {
    var self = this;

    this.serverRequest =
      axios
        .get("http://localhost:8080/api/stocks")
        .then(function(result) {
          self.setState({
            stocks: result.data
          });
        })

  },

通過使用第二個。 您將股票作為一種狀態存儲在這里。 將狀態解析為數據片段。

Answer 5

• 在http://localhost:3001/輸入你的 JSON 文件目錄： Mydata.json 是我的 JSON 文件名，你輸入你的文件名： 不要忘記在頂部導入 axios。 *

 componentDidMount() { axios.get('http://localhost:3001/../static/data/Mydata.json').then(response => { console.log(response.data) this.setState({lists: response.data}) }) }

Answer 6

如果您通過 HTTP 加載文件，則可以使用內置的window.fetch()函數（在過去幾年的瀏覽器中，請參閱Mozilla 的開發人員頁面以獲得兼容性支持）。

fetch("https://api.example.com/items")
  .then(res => res.json())

React 文檔解釋了其他一些執行Ajax 請求的方法（即來自已加載網頁的請求）。

如果您的 JSON 在本地文件中，則只需導入它，正如其他人所解釋的那樣：

import test from 'test.json';