如何用React和FastAPI向后端传数组？遇422错误求助

错误根源 #

问题核心是请求数据格式与后端接口定义不匹配：

• 前端解析CSV后得到的是数组格式的多条Player数据（约350条）
• 后端接口却定义为接收单个PlayerInfo对象，FastAPI的请求验证机制因此抛出422错误

解决方案（推荐批量处理版本） #

1. 修改FastAPI后端代码，支持接收PlayerInfo列表 #

将接口参数改为List[PlayerInfo]，直接接收前端传来的数组数据：

from typing import List
from fastapi import status, HTTPException, APIRouter
from pydantic import BaseModel
from fastapi.responses import JSONResponse
from fastapi.encoders import jsonable_encoder

router = APIRouter()

class PlayerInfo(BaseModel):
    Mins: str
    Player: str

@router.post("/uploadPlayerMins")
async def create_upload_file(players: List[PlayerInfo]):
    try:
        # 循环打印每条数据
        for idx, player in enumerate(players):
            print(f"第{idx+1}条数据: {player.dict()}")
        return JSONResponse(
            status_code=status.HTTP_200_OK,
            content=jsonable_encoder({
                'status': 'success',
                'status_code': 200,
                "message": '数据上传成功'
            })
        )
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

2. 调整前端请求（确保格式正确） #

显式指定Content-Type，确保axios发送JSON格式的数组：

async function postData() {
    try{
        console.log('File Data:', fileData)
        const response = await axios.post(
            `${API_KEY}/uploadPlayerMins`,
            fileData,
            { headers: { 'Content-Type': 'application/json' } }
        )
        console.log(response.data)
    }
    catch (error) {
        console.error(error.response?.data || error)
    }
}

额外验证点 #

1. 检查前端fileData结构：确认每个元素都包含Mins和Player字段，字段拼写、大小写要和后端模型完全匹配
2. 查看FastAPI返回的422错误详情：错误信息会明确指出验证失败的具体原因（比如字段缺失、类型不匹配），可快速定位问题

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