如何在组件中显示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.js

export default
{
  // your json data
} 

然后您可以在React组件中通过执行操作导入JSON数据

import data from './data.js'

您将需要遍历json数据以将必要的信息传递给组件

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

这将为您关于人员的每个数据条目创建一个List.Item组件，然后通过访问人员对象上的firstName，lastName，phone，您可以将该数据传递到您的组件中] >

Answer 2

假设您的json处于您的状态。您可以映射状态的项目并按以下方式显示：