web-dev-qa-db-ja.com

React-すべてのデータをJSONからコンポーネントにロードします

Reactを使用し、ローカルjsonファイルからコンポーネントにデータをロードしようとしています。name：valueペアの 'name'だけでなく、すべての情報を印刷しようとしています。値）をフォームのように見せます。

これを行う最良の方法を探しています。解析する必要がありますか？マップ機能を使用する必要がありますか？私はReactが初めてなので、コードで解決策を教えてください。これに似た他の質問を見てきましたが、私が必要とは思わない他の多くのコードが含まれています。

私のコードの例：test.json

"person": {
  "name": John,

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

test.js

import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           ) 
      }
};

export default Test;

Jsonからインポートできるコードと、すべてのフィールドを表示するコンポーネント内のコードが必要です。

javascriptjsonreactjsparsing
6
ChloeH

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;
12
kind user

気にするべき最初の重要な質問は、このJSONをどのように取得したいかです。あなたの問題を非常によく理解していれば、それはローカルJSONファイルです。したがって、これらの値を取得するには、アプリ内でローカルサーバーを実行する必要があります。

Node.jsで作成された live-server をお勧めします。

その後、 axios tofetch dataを使用してから...

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をすでに配置しました。

8
Yuri Ramos

JSON.parse（json）を使用例：

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

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

こんにちは、これに対する最善の解決策は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);
}

リクエストは、解析されたデータを取得する場所です。さあ、それで遊ぶ

ES5を使用した別の例

componentDidMount: function() {
    var self = this;

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

  },

2番目のものを使用します。ここに状態として在庫を保存しました。状態をデータの断片として解析します。

0
Yuhao