reactjs - 为什么我的反应数据表同时呈现所有数据搜索栏也不起作用?
问题描述
我正在使用 mdbreact 渲染获取的数据以显示在数据表中,所有数据都立即渲染,它没有跟随分页,搜索栏也没有搜索任何内容。数据表的每个功能都正确呈现,只有功能不工作。
import {MDBDataTable} from 'mdbreact';
class Quake extends Component {
constructor(props){
super(props)
this.state={
posts:[],
error:''
}
}
componentDidMount(){
axios.get('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02')
.then(response =>{
//console.log(response)
this.setState({
posts : response.data.features
},()=>console.log(this.state.posts))
})
.catch(error =>{
console.log(error)
this.setState({
error : 'Error retreiving data'
})
})
}
render(){
const{posts,error} = this.state
const location = posts.map(post=><div key={post.id}>{post.properties.place}</div>)
const mag = posts.map(post=><div key={post.id}>{post.properties.mag}</div>)
const data = {
columns : [
{
label:'Magnitude',
field:'mag'
},
{
label:'Place',
field:'loc'
}
],
rows : [
{
'mag':mag,
'loc':location
}
]
}
console.log("Something Fishy")
return(
<MDBDataTable
striped
bordered
small
data={data}/>
);
}
}
export default Quake
解决方案
您需要通过行进行映射。现在都是一排。
const rows = posts.map(post => ({
mag: <div key={post.id} > {post.properties.mag}</div>,
loc: <div key={post.id}>{post.properties.place}</div>
}));
const data = {
columns: [
{
label: 'Magnitude',
field: 'mag'
},
{
label: 'Place',
field: 'loc'
}
],
rows
}
推荐阅读
- c++ - c-style this 或 shared_from_this 作为函数参数
- angular - Angular aot build 中的错误:不支持表达式形式
- php - Laravel Passport Auth::attempt false, password_verify true
- javascript - 画布游戏在低 FPS 下无法正常工作
- sql - 如何选择具有相同顺序的值
- php - 我需要修复我的 mysql 查询以在我的 HTML 页面中显示一些内容
- python - 根据时间列的内容分离 Pandas 数据框
- python - 用熊猫绘制多个重叠的直方图
- excel - 为什么这个 msgbox 代码会弹出错误?
- angular - Angular 测试从 HttpErrorResponse 手动创建 HttpEvent