reactjs - 为什么我的反应数据表同时呈现所有数据搜索栏也不起作用？

Question

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

Answer 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
    }