React中使用useParams+axios.get获取数据后JSX渲染报错如何解决？

问题根源 #

你两次报错的核心原因都是没有正确提取接口返回的嵌套字段：
你打印的res.data完整结构是外层包含message和data两个属性的对象，真正的员工、余额字段都存在内层的res.data.data里，你直接把外层整个对象赋值给状态变量，才导致后续渲染报错。 #

两种写法的错误说明 #

• 第一次不使用map的写法：你把整个外层对象直接赋值给了balance、employee状态，渲染时JSX无法直接把对象作为文本内容输出，因此抛出「Objects are not valid as a React child」错误。
• 第二次使用map的写法：你把balance初始值设为数组，但实际赋值还是整个外层对象，对象本身没有map方法，因此抛出类型错误。

修正后的代码（不需要用map，返回的是单个对象数据，不是数组） #

import  { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const Success = () => {
    const [balance, setBalance] = useState(0);
    const [employee, setEmployee] = useState("");
    const [notes, setNotes] = useState("");
    const { id } = useParams();

    useEffect(() => {
        axios
        .get(`http://localhost:5000/get-snapshot-id/${id}`)
        .then((res) => {
            // 正确提取内层data里的对应字段
            const resultData = res.data.data;
            setBalance(resultData.balance);
            setEmployee(resultData.employee);
            setNotes(resultData.notes);
        })
        .catch((err) => {
            console.log(err);
        });
    // 依赖项放id即可，id变化时重新请求数据
    }, [id]);

    return(
    <>
    <h2>Successfully Updated Balance!</h2>
    {/* 余额保留两位小数，匹配你要的展示效果 */}
    <h4> {employee}'s new balance is {balance.toFixed(2)}</h4>

    <button><a href="/search-comp-details">Continue searching</a></button>
    <button><a href="/main">Back to Main</a></button>
    </>
    )
}
export default Success;

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