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

Question

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

这是我的json数据：

[
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "[phone]",
        "email": "[email protected]"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "[phone]",
        "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>

有人可以帮助我显示列表吗？在此先感谢

Answer 1

您可以从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反应的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 2

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

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 3

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

1. 使用ES6进出口
2. 假设您使用Create React App初始化了项目，然后在public文件夹中的文件中添加了JSON数据，然后在componentDidMount()方法中获取了该数据，最后将获取的数据添加到了组件的状态。
3. 如果数据是静态的，则可以在初始化组件时将其添加到组件的状态。

实施1：

在文件中添加JSON数据，例如People.js：

const peopleData = [
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "[phone]",
        "email": "[email protected]"
    },

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

export default peopleData;

然后在您的组件中，以如下方式导入它：

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

有关ES6进出口的更多信息，请查看此出色的cheatsheet。

实施2：

1. 在public目录中添加一个包含JSON数据的文件，假设它名为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": "[phone]",
        "email": "[email protected]"
      },
      {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "[phone]",
        "email": "[email protected]"
      }
    ]
  };

  render() {
    ...
  }
}

export default MyComponent;

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

希望有帮助！