useEffect 和 useState 以及 API

Question

我从后端（成功）获取此数据并想要显示它，首先是 div 中的名称（chatName）。我不知道问题出在哪里，但上述错误一遍又一遍地运行？ 错误

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;

我想使用 map() 或 forEach() 函数对数组中的数据进行排序，但它们要么未定义，要么 setChats 不是函数。 帮助在页面首次呈现后显示数据...谢谢， 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: {…}}

Answer 1

React useState 函数返回一个数组而不是对象，因此在解构赋值时必须使用

[ ]

而不是

{ }

查看您的 useState：

const { chats, setChats } = useState([]);

并将其更改为

const [chats, setChats] = useState([]);

更新：

我还看到你在useEffect中获取数据。如果您只想在安装组件时调用一次 fetch 函数，我建议您添加一个空数组作为 useEffect 函数的第二个参数。否则它将在每次重新渲染时获取数据。

useEffect(() => {
  fetchData();
}, []);