如何在 reactjs 组件中显示 json 数据

Question

我是新手。我不知道如何在我的组件之一中导入 json 数据。

这是我的 json 数据：

[
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "abcyz@gmail.com"
    },
    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
    }
]

这是列表组件：

<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>

谁能帮我显示列表？提前致谢

Answer 1

如果您想将该数据从另一个文件导入您的组件，您基本上可以导出数据所在的对象。

data.js

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

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

在您的 React 组件中，您可以通过执行以下操作导入您的 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>
   )
})}

注意！ 列表元素也需要一个键属性否则反应会抛出错误

这将为每个关于人员的数据条目创建一个 List.Item 组件，然后通过访问 firstName、lastName、phone 人员对象将能够将该数据传递给您的组件。

例子

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

Answer 2

您可以从 data.json 中导入联系人，并使用 map() 来迭代和显示联系人。

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Container>
        <Grid>
          <Grid.Row>
            <Grid.Column>
              <Header>List</Header>
              <List>
                {contacts.map(el => {
                  return (
                    <List.Item  key={el.id}>
                      <List.Content>
                        {el.firstname} {el.lastname}
                      </List.Content>
                      <List.Content>{el.phone}</List.Content>
                    </List.Item>
                  );
                })}
              </List>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    );
  }
}

export default App;

游乐场：

https://codesandbox.io/s/so-semantic-ui-jfobr

但我认为使用语义-ui-react 中的 Table 组件会更好。

import React, { Component } from "react";
import {  Table } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Fullname</Table.HeaderCell>
            <Table.HeaderCell>Phone</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {contacts.map(el => {
            return (
              <Table.Row key={el.id}>
                <Table.Cell>{el.id}</Table.Cell>
                <Table.Cell>
                  {el.firstname} {el.lastname}
                </Table.Cell>
                <Table.Cell>{el.phone}</Table.Cell>
                <Table.Cell>{el.email}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    );
  }
}

export default App;

Table 版本的游乐场：

https://codesandbox.io/s/so-semantic-ui-28rq9

文档：

https://reactjs.org/docs/lists-and-keys.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 3

有几种方法可以在 React 组件中导入 JSON 数据：

使用 ES6 导入和导出
将 JSON 数据添加到 public 文件夹中的文件中，假设您使用 Create React App 初始化项目，然后在 componentDidMount() 方法中获取所述数据，最后将获取的数据添加到组件的状态。
如果数据是静态的，您可以在初始化组件时将其添加到组件的状态中。

实施 1：

在文件中添加您的 JSON 数据，例如 People.js:

const peopleData = [
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "abcyz@gmail.com"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
    }
];

export default peopleData;

然后在您的组件中，像这样导入它：

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

有关 ES6 导入和导出的更多信息，请查看这个很棒的 cheatsheet。

实施 2：

在您的 public 目录中添加一个包含您的 JSON 数据的文件，假设它被称为 people.json
在您的组件中，添加 componentDidMount() 生命周期方法，然后获取您的数据。
将获取的数据添加到组件的状态。

您的组件可能类似于：

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": "abcyz@gmail.com"
      },
      {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
      }
    ]
  };

  render() {
    ...
  }
}

export default MyComponent;

无论您采用何种方法导入 JSON 数据，您都需要在 render() 方法中映射结果数组。有关 Array.protoype.map() 方法的更多信息，请查看 MDN 的 documentation as well as React's Documentation 以了解通过列表进行映射和呈现列表项的方法。两者都是很棒的资源。

希望对您有所帮助！

Answer 4

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>

如何在 reactjs 组件中显示 json 数据

How to display json data in a reactjs component

reactjs

semantic-ui-react