React中使用Axios展示MongoDB数据失败问题排查

问题描述 #

在React项目中尝试通过Axios从接口http://localhost:3001/getProducts获取MongoDB数据并展示，已确认接口能返回JSON格式数据，但页面无法正常渲染数据，代码如下：

import Axios from 'axios';
import { useNavigate } from 'react-router';


export default function ProductCatalog() {

    let navigate = useNavigate();
    function addProduct() {
            navigate('/adding')
    }

    const [products, setProducts] = useState([{}])
    
    useEffect(() => {

        const axiosProd = async () => {
            const response = await Axios('http://localhost:3001/getProducts');
            setProducts(response.data)
        };
        axiosProd();
    }, []);

                const useProducts = products.map((product)=>{
                    return <div>
                            <h1>{product.name}</h1>
                        </div>
                })

                return(
                    <>
                    <button className = "button" onClick={addProduct}>Add New Product</button>
                    <br></br>
                    {useProducts}
                    </>
                )
}

错误点分析 #

• 缺少React钩子导入：useState和useEffect没有从react中导入，运行时会直接报错，React无法识别这两个钩子。
• 初始状态不合理：初始值设为[{}]，第一次渲染时会遍历一个空对象，此时product.name为undefined，可能引发页面异常或控制台警告。
• 异步请求无错误处理：接口请求失败时未捕获异常，会直接抛出错误阻断后续逻辑，导致数据无法更新。
• 列表渲染无唯一key：React列表渲染要求给每个子元素添加唯一key属性，否则会触发性能警告，甚至导致渲染异常。
• 变量命名不规范：useProducts以use开头，不符合React钩子的命名规则（仅自定义钩子用use开头），容易造成混淆。

修正后的代码 #

import Axios from 'axios';
import { useNavigate } from 'react-router';
// 导入缺失的React钩子
import { useState, useEffect } from 'react';

export default function ProductCatalog() {
    let navigate = useNavigate();
    
    function addProduct() {
        navigate('/adding');
    }

    // 初始状态改为空数组
    const [products, setProducts] = useState([]);
    
    useEffect(() => {
        const axiosProd = async () => {
            try {
                // 添加错误捕获逻辑
                const response = await Axios('http://localhost:3001/getProducts');
                setProducts(response.data);
            } catch (error) {
                console.error('获取产品数据失败:', error);
            }
        };
        axiosProd();
    }, []);

    // 修改变量名，并添加唯一key
    const productList = products.map((product) => {
        return (
            <div key={product._id}> {/* 使用MongoDB文档的_id作为唯一标识 */}
                <h1>{product.name}</h1>
            </div>
        );
    });

    return(
        <>
            <button className="button" onClick={addProduct}>Add New Product</button>
            <br />
            {/* 空数据时显示提示，提升用户体验 */}
            {products.length === 0 ? <p>暂无产品数据</p> : productList}
        </>
    );
}

额外说明 #

• 确认接口返回的每个产品对象包含name和_id字段，若_id字段名不同，替换为实际的唯一标识字段即可。
• 空数据提示可以避免页面完全空白，让用户明确当前状态。

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