reactjs中如何使用json在表格中显示数据？

Posted 2023-02-22

【中文标题】reactjs中如何使用json在表格中显示数据？

【英文标题】：how to display data in table using json in react js?

【发布时间】：2018-09-16 08:39:16

【问题描述】：

我有像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 将其显示在表格中？

【参考方案1】：

您可以使用固定数据表来显示来自json Response的数据。由于数据量大，常规表难以管理，这将是一个更好的选择。

文档在

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

此链接将对您有所帮助。

【参考方案2】：

一旦组件挂载，您可以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。或者你甚至可以退回到好的 ol' XMLHttpRequest。

另一方面，在构建组件列表时，每个子组件都有一个唯一的key 属性很重要。我还在代码中更新了这一点，假设 movie.id 是

axios 代码示例：

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

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

EDIT 2：添加了 axios 代码。

【讨论】：

这是正确的，但componentDidMount()是获取数据的首选生命周期方法。 componentWillMount() 将以 UNSAFE_ 为前缀，从 react 16.3 开始，并且可能会在未来的 react 版本中被删除。见reactjs.org/docs/react-component.html#unsafe_componentwillmount。

我还写了一些不错的替代方案。 superagent 和 axios 等库使处理异步 HTTP 请求变得更容易、更符合人体工程学，您也可以使用 XMLHttpRequest。

我应该先在我的 react 应用中安装 fetch 吗？ @菲利普

请告诉我@Phillip

@Ahmad 我添加了一些示例代码，但我不知道我是否在为您编写代码对您不利。您应该学习浏览库文档和 API。我建议您查看 axios 文档，以便您了解发生了什么:)

【参考方案3】：

可以使用 axios 发送 http 请求。

看起来像这样：

const response = await axios.get(your_url_here);
const items = response.data.items;

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

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

希望对您有所帮助。

【讨论】：

能否请你为我写完整的代码，因为我是新手，我不知道在你的答案中写下这两行

我使用 Redux Store 来存储我的对象，所以复制/粘贴我的代码无论如何都帮不了你。您可以调用一个函数，例如在按钮 onPress 事件上，并将这些行添加到此函数中。 （不要忘记 async before function 关键字）。把手弄脏，这是更好的学习方式。

请添加示例代码@WaLinke，因为我是新来的反应，我无法显示数据，因为 4 天......如果你能帮助我，我会很高兴......