Question

我有像this

这样的JSON

我想使用此JSON并使用react js在表中显示数据。

这是我如何显示JSON文件中的数据。

import React, { Component } from 'react';
import data from './data.json';

class App extends Component {
  render() {
    return (
        <ul>
        {
          data.map(function(movie){
            return <li>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

如何从URL加载JSON并使用reactjs在表中显示它？

Answer 1

组件安装后你可以fetch JSON，当你最终解决它时，你可以更新组件的状态：

import React, { Component } from 'react';


class App extends Component {
  // initially data is empty in state
  state = { data: [] };

  componentDidMount() {
    // when component mounted, start a GET request
    // to specified URL
    fetch(URL_TO_FETCH)
      // when we get a response map the body to json
      .then(response => response.json())
      // and update the state data to said json
      .then(data => this.setState({ data }));
  }


  render() {
    return (
        <ul>
        {
          this.state.data.map(function(movie){
            return <li key={movie.id}>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

如果您无法使用fetch，则可以使用其他库，例如superagent或axios。或者你甚至可以回到'XMLHttpRequest。

另一方面，在构建组件列表时，每个孩子都有一个独特的key属性非常重要。我还在代码中更新了它，假设movie.id是

示例axios代码：

axios.get(URL)
  .then(response => response.data)
  .then(data => this.setState({ data }));

编辑：正如trixn在回复中所写，componentDidMount是获取数据的首选位置。更新了代码。

编辑2 ：添加了axios代码。

Answer 2

您可以使用axios发送http请求。

看起来像这样：

from statistics import mean

a = [1, 2, 3, 4]
b =  [1, 1, 1, 1]

mean(abs(x - y) for x, y in zip(a, b))
# 1.5

关于等待关键字：How to use await key word on react native?

这是文档的axios GitHub页面：https://github.com/axios/axios

希望它有所帮助。

Answer 3

您可以使用固定数据表来显示来自json Response的数据。由于数据量巨大且管理传统表格很困难，因此这将是一个更好的选择。< / p>

文档载于

https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ObjectDataExample.js

此链接可以帮助您。

如何在反应js中使用json在表中显示数据？

3 个答案: