React无法从MySQL取数据，报data.map() is not a function错误

问题根源 #

• 初始状态useState({})将data设为对象，而map()是数组专属方法，组件首次渲染时调用data.map()必然报错
• 虽然Axios请求成功后会把data更新为数组，但首次渲染时请求未完成，此时data仍是对象

修复方案 #

1. 初始化状态为数组 #

将data的初始值从对象改为空数组，确保首次渲染时map()能正常调用（空数组调用map()不会报错）。

2. 优化请求逻辑 #

• 添加加载状态，避免请求未完成时页面空白
• 捕获请求异常，防止错误导致组件崩溃
• 修正useEffect依赖，仅在组件挂载时发起一次请求

3. 添加列表项唯一key #

React列表渲染必须为每个子元素添加唯一key，优化渲染性能并避免警告。

修改后的Messages.js代码 #

import React , {useEffect , useState} from 'react';
import MessageCard from './MessageCard';
import ax from 'axios';
import './Messages.css';

function Messages() {
    // 初始化状态为空数组
    const [data , setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(()=>{
        ax.get('http://localhost:3001/server/message')
          .then((response)=>{
              setData(response.data);
          })
          .catch((err)=>{
              setError('获取消息失败：' + err.message);
              console.error(err);
          })
          .finally(()=>{
              setLoading(false);
          });
    } , []) // 空依赖数组，仅组件挂载时请求一次

    // 加载状态提示
    if(loading) return <div>加载中...</div>;
    // 错误状态提示
    if(error) return <div>{error}</div>;

    return(
        <div id="messageMain">
            {data.map((element)=>{
                return <MessageCard 
                    key={element.ID} // 用数据库主键作为唯一key
                    fullName={element.FullName} 
                    em={element.Email} 
                    no={element.PhoneNumber} 
                    msg={element.Message} 
                />
            })}
        </div>
    );
}

export default Messages;

额外说明 #

服务端代码逻辑正常（你已确认请求能返回数据），只需调整前端状态处理逻辑即可解决问题。

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