我想更新chatList，当用户按下按钮时，将调用方法newChat()并调用API。此API会发回所有旧聊天记录+新聊天记录。但是当我调用这个时，我得到一个错误TypeError: chatList.map is not a function。错误是因为我正在添加完整的聊天吗？当我按下按钮时，我如何让聊天列表更新自己，我用UseEffect尝试过一次，但这也不起作用。
那么，当按下按钮时，旧聊天记录和新聊天记录将显示在列表中，我该如何做到这一点呢。
import React, { useState, useEffect } from "react";
import { GroupchatCard } from "./GroupchatCard";
import ChatEmpty from "./ChatEmpty";
import axios from "axios";
function ChatSide() {
const [lengthChats, setLengthChats] = useState(0);
const [isChatEmpty, setIsChatEmpty] = useState(true);
const [chatList, setChatList] = useState([]);
const [messagesnumber, setMessagesnumber] = useState("");
const getMessagesnumber = () => {
var zuffalszahl = Math.floor(Math.random() * 5);
setMessagesnumber(zuffalszahl);
};
// This should load all the chats inital at the beginning
useEffect(() => {
getChats();
}, []);
const getChats = () => {
axios
.get("http://localhost:4000/chat/rooms", { } )
.then((res) => {
if (res.status === 200) {
if(res.data.length >= 1) {
setLengthChats(res.data.length)
setChatList(...chatList, res.data)
setIsChatEmpty(false);
localStorage.removeItem('chatList')
localStorage.setItem('chatList', JSON.stringify(res.data))
}
}
})
.catch((error) => {
console.log(error);
});
}
// If user clicked on the plus add all chats again to the list
useEffect(() => {
// Check if some chats are saved in the local storage
if(lengthChats > 1) {
console.log("working only if the button is clicked")
}
}, [lengthChats]);
/**
* Gernate a new Chat
*/
const newChat = () => {
console.log(lengthChats)
if (lengthChats < 3) {
axios
.get("http://localhost:4000/chat/add", { } )
.then((res) => {
if (res.status === 200) {
console.log(res.data)
if(res.data.length >= 1) {
setLengthChats(res.data.length)
setChatList(...chatList, res.data)
setIsChatEmpty(false);
localStorage.removeItem('chatList')
localStorage.setItem('chatList', JSON.stringify(res.data))
}
}
})
.catch((error) => {
console.log(error);
});
}
else {
window.alert("Du kannst nur maximal drei Chats offen haben");
}
}
window.addEventListener("load", getMessagesnumber);
return (
<div>
<div class="row m-1 mb-5 h-100" style={{ alignItems: "center" }}>
<div class="col-md-11" >
Chats
</div>
<div class="col-md-1" onClick={newChat}>
<i class="fas fa-plus-circle" style={{ fontSize: "2rem", color: "#5869ff" }}></i>
</div>
</div>
<div class="row mb-2">
</div>
<div class="row">
<div class="col-md-12">
{
isChatEmpty === true &&
<ChatEmpty></ChatEmpty>
}
{
isChatEmpty === false &&
<div className="list-group">
{chatList.map((d, i) => (
<GroupchatCard messagesnumber={messagesnumber} chatname={d.chatname} chatid={d.id} chatimage={d.image} />
))
}
</div>
}
</div>
</div>
</div>
);
}
export default ChatSide;
我发现是因为这个useEffect。但是，当第一次加载组件时，我怎么能说呢？做这个初始提交，这样我们就有了所有的值，如果用户单击按钮，就不再考虑这个useEffect了。
useEffect(() => {
getChats();
}, []);
您需要将聊天列表设置为数组：
setChatList(prevList => [...prevList, ...res.data])
它接受一个函数，该函数将通过当前聊天，现在您只需要用[]结束即可。
setChatList(...chatList, res.data) // This fails
这会将数组中的每个项作为参数(...(传递。因此，将选择第一个项目，因为第一个参数将设置为该值。这不是一个数组(只有项目(，所以.map失败
首先猜测chatList不再被视为数组。
也许在chatList.map之前添加以下内容可以帮助您了解出了什么问题
console.log(chatList)
console.log(typeof(chatList))
而不是使用setChatList(…聊天列表，res.data(请尝试设置聊天列表，如下所示：setChatList([…chatList，…res.data](；