[英]how to display data in table using json in react js?
我有JSON像这样
我想使用这个JSON并使用react js在Table中显示数据。
这是我如何显示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将其显示在表中?
您可以在组件安装后获取 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代码。
您可以使用axios发送http请求。
它看起来像这样:
const response = await axios.get(your_url_here);
const items = response.data.items;
关于await关键字: 如何使用await关键字反应原生?
这是docs的axios GitHub页面: https : //github.com/axios/axios
希望能帮助到你。
您可以使用固定的Data表来显示来自json Response的数据。由于数据量巨大且管理传统表很困难,因此这将是一个更好的选择。
文档见
https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ObjectDataExample.js
此链接将帮助您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.