Javascript 未处理的拒绝（TypeError）：conversations.map不是函数

我正在设计聊天应用程序的前端，这是对话组件

问题出在第87行，我已经强调了这一行“conversations”是一个数组，因此我无法在这里找出问题所在。事实上，我是个新手，所以如果有什么愚蠢的事情，我会道歉。谢谢

const Conversations = (props) => {
  const classes = useStyles();
  const [conversations, setConversations] = useState([]);
  const [newConversation, setNewConversation] = useState(null);
  const getConversations = useGetConversations();

  useEffect(() => {
    getConversations().then((res) => setConversations(res));
  },  [newConversation]);

  useEffect(() => {
    let socket = socketIOClient(process.env.REACT_APP_API_URL);
    socket.on("messages", (data) => setNewConversation(data));

    return () => {
      socket.removeListener("messages");
    };
  }, []);

  return (
    <List className={classes.list}>
      <ListItem
        classes={{ root: classes.subheader }}
        onClick={() => {
          props.setScope("Global Chat");
        }}
      >
        <ListItemAvatar>
          <Avatar className={classes.globe}>
            <LanguageIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText className={classes.subheaderText} primary="Global Chat" />
      </ListItem>
      <Divider />

      {conversations && (
        <React.Fragment>
// 87       {conversations.map((c) => (   // error on this line
            <ListItem
              className={classes.listItem}
              key={c._id}
              button
              onClick={() => {
                props.setUser(handleRecipient(c.recipientObj));
                props.setScope(handleRecipient(c.recipientObj).name);
              }}
            >
              <ListItemAvatar>
                <Avatar>
                  {commonUtilites.getInitialsFromName(
                    handleRecipient(c.recipientObj).name
                  )}
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={handleRecipient(c.recipientObj).name}
                secondary={<React.Fragment>{c.lastMessage}</React.Fragment>}
              />
            </ListItem>
          ))}
        </React.Fragment>
      )}
    </List>
  );
};```

const对话=（道具）=>{
const classes=useStyles（）；
const[conversations，setConversations]=useState（[]）；
const[newConversation，setNewConversation]=useState（null）；
const getConversations=useGetConversations（）；
useffect（（）=>{
getConversations（）。然后（（res）=>setConversations（res））；
}，[newConversation]）；
useffect（（）=>{
让socket=socketIOClient（process.env.REACT\u APP\u API\u URL）；
socket.on（“messages”，（data）=>setNewConversation（data））；
return（）=>{
socket.removeListener（“消息”）；
};
}, []);
返回(
{
道具设置范围（“全球聊天”）；
}}
>
{对话&&(
//87{conversations.map（（c）=>（//此行出错
{
props.setUser（handleRecipient（c.recipientObj））；
道具固定镜（手持识别器（c.recipientObj.name）；
}}
>
{commonUtilites.getInitialsFromName(
HandlerRecipient（c.recipientObj）.名称
)}
))}
)}
);
};```

我认为您需要设置在getConversations中获取的数据

---

setConversations（res.data）

您确定总是从

getConversations

获取数组吗？尝试打印api调用中返回的数据，以确保它实际上是一个数组。似乎

getConversations（）。然后（（res）=>setConversations（res））

正在使用非数组值更新状态。这意味着

对话

为

空

无法从

API

获取数据。您应该检查

API

内部的连接或逻辑

API