web-dev-qa-db-ja.com

reactjsコンポーネントでjsonデータを表示する方法

私は反応するのが初めてです。コンポーネントの1つにjsonデータをインポートする方法がわかりません。

これは私のjsonデータです：

[
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
    },
    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
    }
]

ここにリストコンポーネントがあります：

<Container>
  <Grid>
    <Grid.Row>
      <Grid.Column>
        <Header>List</Header>
        <List>
          <List.Item block>
            <List.Content>FirstName and Last Name</List.Content>
            <List.Content>Phone</List.Content>
          </List.Item>
        </List>
      </Grid.Column>
    </Grid.Row>
  </Grid>
</Container>

誰かがリストを表示するのを手伝ってくれる？前もって感謝します

reactjssemantic-ui-react
3
Sanjana

そのデータを別のファイルからコンポーネントにインポートする場合は、基本的にはデータが存在するオブジェクトをエクスポートできます。

data.js

export default [
    {
        "id": 1,
        "firstName": "abc",
        "lastName": "xyz",
    },

    {
        "id": 2,
        "firstName": "def",
        "lastName": "uvz",
    }
]

あなたの反応コンポーネントでは、次のようにしてjsonデータをインポートできます

import data from './data.js'

コンポーネントに必要な情報を渡すには、jsonデータを反復処理する必要があります

{data.map(person => {
   return (
    <List.Item block key={person.id}>
       <List.Content>
         {person.firstName} and {person.lastName} 
       </List.Content>
     <List.Content>{person.phone}</List.Content>
    </List.Item>
   )
})}

Heads up！リスト要素にはキープロパティも必要ですが、そうでない場合はエラーが発生して反応します

これにより、人々に関するデータエントリごとにList.Itemコンポーネントが作成され、firstName、lastName、phoneon人物オブジェクトにアクセスできるようになりますそのデータをコンポーネントに渡します。

例

https://codesandbox.io/s/angry-chebyshev-djxq0?fontsize=14

1
Ozan
constructor(props) {
super(props);
this.state = {
  loadedList: [],
  lists: [],
};
  }

componentDidMount() {
  
  // after 3001/ write your .json file directory
  
  axios.get('http://localhost:3001/../static/data/terrifdata.json')
      .then(response => {
       this.setState({
         lists: response.data,
         loadedList: response.data,
         isLoading: false
        })
    })
 }

<div>
{loadedList.map((postDetail, index) => {
                    return (
                  <h5>
                     {postDetail.name}
                  </h5>
                  )}
               }
</div>
0
Khadim Rana

Reactコンポーネント内でJSONデータをインポートする方法はいくつかあります。

  1. ES6のインポートとエクスポートを使用する
  2. Create React Appでプロジェクトを初期化し、componentDidMount()メソッド内で上記のデータをフェッチすると想定して、publicフォルダー内のファイルにJSONデータを追加します、最後にフェッチしたデータをコンポーネントの状態に追加します。
  3. データが静的な場合は、コンポーネントを初期化するときに、コンポーネントの状態に追加するだけです。

実装1：

JSONデータをファイルに追加します。例：_People.js_：

_const peopleData = [
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
    }
];

export default peopleData;
_

次に、コンポーネント内で次のようにインポートします。

_// myPeopleData will contain your json data
import myPeopleData  from '<Relative_Path>/People.js';
_

ES6のインポートとエクスポートの詳細については、この素晴らしい cheatsheet をご覧ください。

実装2：

  1. JSONデータを含むpublicディレクトリ内にファイルを追加します。ファイルが_people.json_と呼ばれていると仮定しましょう
  2. コンポーネント内で、componentDidMount()ライフサイクルメソッドを追加してから、データをフェッチします。
  3. 取得したデータをコンポーネントの状態に追加します。

コンポーネントは次のように見えます。

_import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: []
  };

  componentDidMount() {
      fetch('./people.json')
        .then(response => response.json())
        .then(data => this.setState({ peopleData: data }));
  }

  render() {
    ...
  }
}

export default MyComponent;
_

最後に、実装3：

コンポーネント内で、デフォルトの状態の一部としてデータを追加するだけです。

_import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: [
      {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
      },
      {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
      }
    ]
  };

  render() {
    ...
  }
}

export default MyComponent;
_

JSONデータをインポートするためのアプローチに関係なく、render()メソッド内で結果の配列をマッピングする必要があります。 Array.protoype.map()メソッドの詳細については、MDNの documentation と、Reactの Documentation をチェックして、リストのマッピングとリストアイテムのレンダリングを確認してください。どちらも素晴らしいリソースです。

うまくいけば、それが役立ちます！

0
Nathan