Javascript React js:this.state.map不是一个函数

我试图解决我的问题，但无法解决。 我使用expressjs创建了API，我想显示（映射）我的状态数组。 在componentDidMount（）中，我更新listOfUsers[]并返回正确的数据。当我想在render（）中映射我的数组时，它会返回一些错误：

未捕获（承诺中）类型错误：this.state.listOfUsers.map不是 作用

未捕获类型错误：this.state.listOfUsers.map不是函数

警告：无法在未安装的服务器上调用setState（或forceUpdate） 组成部分。这是一个no op，但它表明您的内存中存在内存泄漏 应用若要修复，请取消所有订阅和异步任务 在componentWillUnmount方法中

import React，{Component}来自'React'；
从“axios”导入axios；
类MeetingItem扩展了组件{
状态={
会议：[]，
用户列表：[]
}
componentDidMount（）{
//获取会议信息
axios.get(`http://localhost:3000/meetings/`+this.props.match.params.id）
。然后（res=>{
持续会议=资源数据；
本.设置状态（{会议}）；
//console.log（res.data）；
});
axios.get(`http://localhost:3000/takePart/`)
。然后（res=>{
对于（var i=0；i{
const user=res.data；
这个.setState（{
用户列表：用户
});
//在那个地方，数据是返回的
log（this.state.listOfUsers）；
});
}
}
});
}
参与=（）=>{
console.log（“take”）；
const takePart={
meetingId:this.props.match.params.id，
userId:sessionStorage.getItem（'userId'），
};
//x-www-form
设formBody=[]；
用于（让物业参与）{
设encodedKey=encodeURIComponent（属性）；
让encodedValue=encodeURIComponent（takePart[property]）；
formBody.push（encodedKey+“=”+encodedValue）；
}
formBody=formBody.join（&）；
轴心柱(`http://localhost:8000/takePart`，formBody，{headers:{'Content Type'：'application/x-www-form-urlencoded'}}）
。然后（res=>{
控制台日志（res）；
console.log（res.data）；
//如果成功添加会议，则显示警报
如果（资源状态=“200”）{
警惕（“谢谢你，待会儿见。”）；
}否则{
提醒（“对不起，我们无法处理。请重复一会儿。”）；
}
})
}
render（）{
var users=this.state.listOfUsers.map（用户=>{
返回(
{user.firstName}

)
});
返回(
{/*this.props.match.params.id*/}
标题：{this.state.meetings['Title']}

描述：{this.state.meetings['Description']}

作者：{this.state.meetings['Author']}

latitude:{this.state.meetings['latitude']}

经度：{this.state.meetings['longide']}

日期：{this.state.meetings['date']}

时间：{this.state.meetings['time']}

{用户}

参加
);
}
}
导出默认会议项目；

---

有什么建议吗？

基本上，错误表明ListoUsers不是数组（因为它没有map方法）。 看起来，您的响应中有一个对象而不是数组：

axios.get(`http://localhost:3000/users/`+ res.data[i]['userId'])
          .then(res => {
            const user = res.data;
            this.setState({ 
              listOfUsers : user
            });

---

基本上，错误表明ListoUsers不是数组（因为它没有map方法）。 看起来，您的响应中有一个对象而不是数组：

axios.get(`http://localhost:3000/users/`+ res.data[i]['userId'])
          .then(res => {
            const user = res.data;
            this.setState({ 
              listOfUsers : user
            });

---

API返回的用户列表应该是一个数组

要处理此错误，您只需在映射之前进行一个检查，即

this.state.listOfUsers

是一个数组

i、 e

var users=Array.isArray（this.state.listOfUsers）和&this.state.listOfUsers.map（user=>{
返回(
{user.firstName}

)
});

---

还要确保API

axios.gethttp://localhost:3000/users/“+res.data[i]['userId']）

返回的用户列表是预期结果的数组。

API返回的用户列表应该是数组

要处理此错误，您只需在映射之前进行一个检查，即

this.state.listOfUsers

是一个数组

i、 e

var users=Array.isArray（this.state.listOfUsers）和&this.state.listOfUsers.map（user=>{
返回(
{user.firstName}

)
});

---

还要确保API

axios.gethttp://localhost:3000/users/“+res.data[i]['userId']）

返回的用户列表是用于预期结果的数组。

因为它不是数组，所以可以使用如下内容：

let myState = Object.entries(this.state);

或

Object.values（）

这将允许您迭代其中的每一个。例如，使用Object.entries，您可以在每个键、值上循环

更多信息请点击此处：
由于它不是一个数组，您可以使用如下内容：

let myState = Object.entries(this.state);

或
Object.values（）

这将允许您迭代其中的每一个。例如，使用Object.entries，您可以在每个键、值上循环

更多信息请点击此处：
在
render（）函数中，更改为：

var users = this.state.listOfUsers.map(user => {
 return (
    <p>{user.firstName}</p>
 )
});

var users=this.state.listOfUsers.map（用户=>{
返回(
{user.firstName}

)
});

致：

var用户=[]；
if（this.state.listOfUsers）{
user=this.state.listOfUsers.map（user=>{
返回(
{user.firstName}

)
});
}

原因
引发异常的原因是，当首次调用
render（）
时，after
componentDidMount（）
hook，
this.state.listoUsers
仍然未定义。默认情况下，您需要将
users=[]
设置为空数组，并且仅在数组成为数组后调用数组上的
map（）
函数
var users = [];
if (this.state.listOfUsers) {
    user = this.state.listOfUsers.map(user => {
       return (
           <p>{user.firstName}</p>
       )
    });
}