Javascript 如何修复'；TypeError:resolveData（…）。映射不是函数'；反应表

我试图在React表中显示Api json数据

我尝试使用不同的表，唯一的一个是

react json to table

，但我无法创建该表。所以我使用css附带的react表，出现了这个错误

class GetStudents扩展组件{
构造函数（）{
超级（）；
此.state={
学生：[]
};
}
componentDidMount（）
{ 
常量url=”http://127.0.0.1:8081/endpoint/students";
获取（url{
方法：“获取”
})
.then（response=>response.json（））
.然后（学生=>{
this.setState（{students:students}）
})
}
render（）{
常量列=[
{
标题：“姓名”，
访问者：“studentName”
} ,  
{
标题：“姓氏”，
访问者：“学生姓氏”
} ,  
{
标题：“等级”，
访问者：“学生等级”
} ,  
]
报税表（
);    
} 
}
导出默认值；

我希望api json值的输出在表中，但实际输出是：

错误1:TypeError:resolveData（…）。映射不是函数 ReactTable.getDataModel

错误2：未处理的拒绝（TypeError）：resolveData（…）。映射不是函数

---

我想问题就在这里

.then(accounts =>{
   this.setState({students:students})
})

您需要在状态中设置帐户

.then(accounts =>{
   this.setState({students:accounts})
})

---

更新

您需要有条件地呈现您的表，因为

componentDidMount

在第一次呈现之后执行，并且最初

this.state.students

id

[]

（空数组），所以您得到了错误

<div className="tbl" >
 {
    this.state.students.length > 0 ?
     <ReactTable columns={columns} data={this.state.students}></ReactTable>
     :
     <div>Loading...</div>
 }
 </div> 

{
this.state.students.length>0？
:
加载。。。
}

我想问题就在这里

.then(accounts =>{
   this.setState({students:students})
})

您需要在状态中设置帐户

.then(accounts =>{
   this.setState({students:accounts})
})

---

更新

您需要有条件地呈现您的表，因为

componentDidMount

在第一次呈现之后执行，并且最初

this.state.students

id

[]

（空数组），所以您得到了错误

<div className="tbl" >
 {
    this.state.students.length > 0 ?
     <ReactTable columns={columns} data={this.state.students}></ReactTable>
     :
     <div>Loading...</div>
 }
 </div> 

{
this.state.students.length>0？
:
加载。。。
}

您设置了错误的状态：

我认为：

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

---

您设置了错误的状态：

我认为：

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

---

我建议将您的默认状态从

[]

更新为类似-

state = [{
studentName: '',
studentSurname: '',
studentGrade: 'N/A'
}]

这一建议的理由是：-

从错误来看，

ReactTable

的方法

resolveData

似乎是映射

data

和

列

在初始渲染期间，您没有处于状态的学生的数据，

resolveData

使用空数据和访问器设置的列调用

解析数据无法映射数据为空的

列

，返回未定义

在

undefined

数据上，不能调用

map

方法

Array

随着默认状态的更新，最初您将看到默认值。当实际的

学生

数据在该州可用时，您不应该看到该错误

---

我建议将您的默认状态从

[]

更新为类似-

state = [{
studentName: '',
studentSurname: '',
studentGrade: 'N/A'
}]

这一建议的理由是：-

从错误来看，

ReactTable

的方法

resolveData

似乎是映射

data

和

列

在初始渲染期间，您没有处于状态的学生的数据，

resolveData

使用空数据和访问器设置的列调用

解析数据无法映射数据为空的

列

，返回未定义

在

undefined

数据上，不能调用

map

方法

Array

随着默认状态的更新，最初您将看到默认值。当实际的

学生

数据在该州可用时，您不应该看到该错误

---

你能给我看看表上的代码吗？或者沙盒。我说只需将

ReactTable

更改为自动关闭标记

，然后查看是否无意中将

resolveData

传递为null等。看到了吗？您能给我看一下ReactTable代码吗？或者沙盒。我说只需将

ReactTable

更改为一个自动关闭标记

，然后查看是否无意中将

解析数据

传递为null等。请参见此