0

我正在使用 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


在此处输入图像描述

在此处输入图像描述

4

1 回答 1

1

您需要通过行进行映射。现在都是一排。

    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
    }
于 2019-09-06T15:13:01.130 回答