反应更新列表不是一个函数

我想更新chatList, 当用户按下按钮时newChat()调用方法并调用 API。此 API 发回所有旧聊天 + 新聊天。但是当我调用它时，我得到一个错误TypeError: chatList.map is not a function。错误是因为我正在添加完整的聊天记录吗？当我按下按钮时，如何让 chatList 自行更新，我曾尝试使用 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();
    
  }, []);