React中setChats不是函数错误排查：无法渲染后端API聊天数据

已成功从后端获取聊天数据，希望页面首次渲染时展示chatName字段，但反复出现setChats is not a function错误；使用map/forEach处理数组时也遇到undefined问题。以下是错误信息、代码及API返回数据，请求帮助解决。

错误信息 #

Uncaught runtime errors:
×
ERROR
setChats is not a function
TypeError: setChats is not a function
    at fetchData (http://localhost:3000/main.528b87f895a6cd643323.hot-update.js:37:5)
ERROR
setChats is not a function
TypeError: setChats is not a function
    at fetchData (http://localhost:3000/main.528b87f895a6cd643323.hot-update.js:37:5)

我的代码 #

import React, { useEffect, useState } from "react";
import axios from "axios";
const Chats = () => {
  const { chats, setChats } = useState([]);
  const fetchData = async () => {
    const { data } = await axios.get("/api/chats");

//console.log(data) consoles the data

    setChats(data);
  };

  useEffect(() => {
    fetchData();
  });
  return (
    <>
      {typeof chats !== "undefined" ? (
        <div>
          {chats.map((d) => (
            <div key={d}>{d.chatName}</div>
          ))}
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default Chats;

API返回数据 #

0
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468bc7c4dd4', chatName: 'John Doe'}
1
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468b27c4dd4', chatName: 'Guest User'}
2
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c2d468bc7c4dd4', chatName: 'Anthony'}
3
: 
{isGroupChat: true, users: Array(3), _id: '617a518c4081150716472c78', chatName: 'Friends', groupAdmin: {…}}
4
: 
{isGroupChat: false, users: Array(2), _id: '617a077e18c25468bc7cfdd4', chatName: 'Jane Doe'}
5
: 
{isGroupChat: true, users: Array(3), _id: '617a518c4081150016472c78', chatName: 'Chill Zone', groupAdmin: {…}}

问题修复方案 #

1. 解决setChats is not a function错误 #

useState返回的是数组而非对象，你用对象解构导致setChats未正确获取到状态更新函数，改成数组解构即可：

// 错误写法
const { chats, setChats } = useState([]);

// 正确写法
const [chats, setChats] = useState([]);

2. 解决数组map时的undefined问题 #

• 初始状态useState([])已经是数组，无需判断typeof chats !== "undefined"，直接判断数组长度更合理；
• map的key不能直接使用对象d，需用唯一标识字段如d._id，避免React警告。

修改后的渲染逻辑：

{chats.length > 0 ? (
  <div>
    {chats.map((d) => (
      <div key={d._id}>{d.chatName}</div>
    ))}
  </div>
) : (
  <div>Loading...</div>
)}

3. 修复useEffect无限循环问题 #

你的useEffect没有依赖数组，会导致组件每次渲染都重复调用fetchData，添加空依赖数组让它仅在组件挂载时执行一次：

useEffect(() => {
  fetchData();
}, []); // 空数组作为依赖，仅挂载时执行

完整修复后的代码 #

import React, { useEffect, useState } from "react";
import axios from "axios";
const Chats = () => {
  const [chats, setChats] = useState([]);
  const fetchData = async () => {
    try {
      const { data } = await axios.get("/api/chats");
      setChats(data);
    } catch (error) {
      console.error("获取聊天数据失败:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
  
  return (
    <>
      {chats.length > 0 ? (
        <div>
          {chats.map((d) => (
            <div key={d._id}>{d.chatName}</div>
          ))}
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default Chats;

内容的提问来源于stack exchange，提问作者Joseph Ngatia