如何使用react-data-table-component来显示存储在构造函数this:state中的数组？

Question

我是React的新手，我想使用react- data - table -component在一个排序的表中显示我从Api获取的数据。但是问题是我不知道react-data-table-component的正确使用方法，react-data-table-component的指令没有包含这样的例子。

以下是我的代码：

我试图将冒犯或this.state.offence直接放到数据中，但什么都没有显示，任何人请给我一些关于正确使用这个或其他方式的建议创建排序表以显示此data.and有到反应-数据-表-组件a link的链接

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { off } from 'rsvp';
import DataTable from 'react-data-table-component';



const columns = [
  {
    name: 'Offences',
    selector: 'Offences',
    sortable: true,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

class SignInForm extends Component {
    constructor() {
        super();

        this.state = {
            email: '',
            password: '',
            offence:[],
            
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick =this.handleClick.bind(this);
        this.handleLogin =this.handleLogin.bind(this);
    }
handleClick(){
      const url ="https://xxxxxxxxxx.sh/offences";
       fetch(url)
       .then(response => {
         console.log(response.clone().json())
         console.log(response.headers.get('Content-Type'))
        if (response.ok) {
          return response.clone().json();
        } else {
          throw new Error('Something went wrong ...');
        }
      })
      .then((res) =>{ 
        console.log(res)
    
        
        this.setState({
          offence: [res]
           });
        
        
      }) // get just the list of articles
      console.log(this.state.offence);
      
    }
render() {
        return (
          
                  <button className="FormField__offence" onClick{this.handleClick}>offence</button>
                 
                  
              </div>
              
              <div> 
              <DataTable
        title="Offences"
        columns={columns}
        data={this.state.offence}
      />
            </div>
            </form>
          </div>
 
           
        );
        
    }
}


export default SignInForm;

我原以为只有一列像样的表格展示

Answer 1

    const columns = [
      {
        name: 'Offences',
        selector: 'Offences',
        sortable: true,
      }
    ];
    
    class SignInForm extends React.Component {
      constructor() {
        super();
    
        this.state = {
          email: '',
          password: '',
          offence: [],
    
        };
    
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        const url = "https://xxxxxxxx.sh/offences";
        fetch(url)
          .then(response => {
            if (response.ok) {
              return response.clone().json();
            } else {
              throw new Error('Something went wrong ...');
            }
          })
          .then((res) => {
    
            this.setState({
              offence: res.offences.map((item,id) => ({id, Offences: item}))
            });
    
    
          }) // get just the list of articles
      }
    
      render() {
          console.log(this.state.offence)
    
        return (
          <div className="App">
            <button
            className="FormField__offence"
            onClick={this.handleClick}>offence</button>
    
            <DataTable
              title="Offences"
              columns={columns}
              data={this.state.offence}
            />
          </div>
        );
      }
    }

Live Link

Answer 2

换掉这个，

this.setState({
  offence: [res]
});

有了这个，

this.setState({
  offence: res
});

在您的示例中，这是来自API调用的res。

{offences: Array(88)}
offences: (88) ["Advertising Prostitution", ... "Weapons Act Offences", "Weapons Act Offences - Other"]
__proto__: Object

所以你可以得到这样的违规行为，

this.setState({
      offence: res.offences
});