React中axios赋值useState出现双重数组问题求助

1. 修复双重数组问题 #

你在map回调里用[{...}]把每个对象包裹成了数组，导致最终events变成了数组套数组的结构。直接返回单个对象即可解决：

setEvents(result.data.events.map((value: any) => ({
    id: value.id, // 别用map的索引当id，优先用后端返回的真实id
    slug: value.slug,
    name: value.name,
    date: value.date,
    eventLevel: value.event_level,
    notes: value.note
})))

2. 修正State类型定义 #

你用了[eventType]元组类型，这表示数组只能有一个元素，不符合后端返回的多事件场景。应该改成数组类型eventType[]，初始值用空数组更合理：

const [events, setEvents] = useState<eventType[]>([]);

3. 修复渲染循环逻辑 #

events是数组，不需要用Object.entries处理，直接调用数组的map方法即可，同时用每个事件的id作为key（比索引更稳定）：

return (
    <div>
        {events.map((event) => (
            <div key={event.id} className='container'>
                <a href={`/journal/events/${event.slug}`}>
                    <h2>{event.name}</h2>
                    <p><b>Date: </b>{event.date}</p>
                    <p><b>Event Type: </b>{event.eventLevel}</p>
                    <p><b>Notes:</b></p>
                    <p>{event.notes}</p>
                </a>
            </div>
        ))}
    </div>
);

完整修正后的代码 #

import { useEffect, useState } from "react";
import axios from 'axios';

type eventType = {
    id: number,
    slug: string,
    name: string,
    date: string,
    eventLevel: string,
    notes: string
}

export const Events = () => {
    const [events, setEvents] = useState<eventType[]>([]);
    
    useEffect(() => {
        const getData = async () => {
            try {
                const result = await axios.get('event/', {withCredentials: true});
                setEvents(result.data.events.map((value: any) => ({
                    id: value.id,
                    slug: value.slug,
                    name: value.name,
                    date: value.date,
                    eventLevel: value.event_level,
                    notes: value.note
                })));
            } catch (err) {
                console.error('获取事件数据失败:', err);
            }
        };
        getData();
    }, []);

    return (
        <div>
            {events.map((event) => (
                <div key={event.id} className='container'>
                    <a href={`/journal/events/${event.slug}`}>
                        <h2>{event.name}</h2>
                        <p><b>Date: </b>{event.date}</p>
                        <p><b>Event Type: </b>{event.eventLevel}</p>
                        <p><b>Notes:</b></p>
                        <p>{event.notes}</p>
                    </a>
                </div>
            ))}
        </div>
    );
};

关键修改说明 #

• 移除map回调里的数组包裹[]，避免生成双重数组
• 将State类型从元组改为数组，匹配后端返回的多数据结构
• 渲染时直接用数组map，不用Object.entries做额外转换
• 用后端返回的id作为元素key，避免索引不稳定导致的渲染问题
• 增加请求错误处理，防止请求失败导致页面崩溃

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