javascript - 如何修复 ReactTable 的 'TypeError: resolveData(...).map is not a function'

Question

我正在尝试在 React Table 中显示 Api json 数据。

我尝试使用不同的表格，唯一的一个是 react-json-to-table 但我无法对表格进行 CSS 处理。所以我使用css自带的react table，就出现了这个错误。

class GetStudents extends Component {

    constructor() {
        super();
        this.state = {
          students: []
        };
    }

    componentDidMount()
    { 
        const url="http://127.0.0.1:8081/endpoint/students";
        fetch(url,{
            method:"GET"
        })
        .then(response => response.json())
        .then(students=>{
            this.setState({students:students})
        })
    }
    render() { 

        const columns=[
        {
           Header:"Name",
           accessor:"studentName"
        } ,  
        {
            Header:"Surname",
            accessor:"studentSurname"
        } ,  
        {
            Header:"Grade",
            accessor:"studentGrade"
        } ,  
        ]

        return (   

               <div className="tbl" >
                    <ReactTable columns={columns} data={this.state.students}> 
                    </ReactTable>
                </div> 
        );    
    } 

}

export default GetStudents;

我期望表中 api json 值的输出，但实际输出是:

error 1: TypeError: resolveData(...).map is not a function ReactTable.getDataModel

error 2: Unhandled Rejection (TypeError): resolveData(...).map is not a function

Answer 1

您设置了错误的状态:

我认为:

componentDidMount() {
  const url = "http://127.0.0.1:8081/endpoint/students";
  fetch(url, {
      method: "GET"
    })
    .then(response => response.json())
    .then(accounts => {
      this.setState({
        students: students
      })
    })
}

应该是

componentDidMount() {
  const url = "http://127.0.0.1:8081/endpoint/students";
  fetch(url, {
      method: "GET"
    })
    .then(response => response.json())
    .then(accounts => {
      this.setState({
        students: accounts
      })
    })
}