React数组映射生成列表无报错却为空，请求技术排查与解决

• 核心问题：map函数回调未返回JSX元素，导致生成的records是全为undefined的数组，最终渲染为空。
• 可选优化：可替换jQuery的$.post为原生fetch，减少第三方依赖。

修复后的jQuery版本代码 #

import { useState, useEffect } from 'react';
import $ from 'jquery';

const PerformanceRecord = (props) => {
    const [performanceRecord, setPerformanceRecord] = useState([]);

    useEffect(() => {
        $.post('php/study_room/get_performance_record.php')
          .done((data) => {
              const parsedData = JSON.parse(data);
              console.log(parsedData);
              setPerformanceRecord(parsedData);
          })
          .fail((xhr) => {
              alert(`发生错误：${xhr.statusText}`);
          });
    }, []);

    // 修复：用圆括号包裹JSX实现隐式返回，或添加return关键字
    const records = performanceRecord.map((record, index) => (
        <li key={index}>
            <span>{record[0]}</span>
            <span>{record[1]}</span>
            <span>{record[2]}</span>
            <span>{record[3]}</span>
            <span>{record[4]}</span>
        </li>
    ));

    const printHandler = () => console.log('使用浏览器打印功能');

    return (
        <div id="record">
            <h3>用户记录</h3>
            <ol>
                {records}
            </ol>
        </div>
    )
};

export default PerformanceRecord;

ES6原生fetch替代方案 #

import { useState, useEffect } from 'react';

const PerformanceRecord = (props) => {
    const [performanceRecord, setPerformanceRecord] = useState([]);

    useEffect(() => {
        fetch('php/study_room/get_performance_record.php', {
            method: 'POST'
        })
        .then(response => {
            if (!response.ok) throw new Error(response.statusText);
            return response.text();
        })
        .then(data => {
            const parsedData = JSON.parse(data);
            console.log(parsedData);
            setPerformanceRecord(parsedData);
        })
        .catch(error => {
            alert(`发生错误：${error.message}`);
        });
    }, []);

    const records = performanceRecord.map((record, index) => (
        <li key={index}>
            <span>{record[0]}</span>
            <span>{record[1]}</span>
            <span>{record[2]}</span>
            <span>{record[3]}</span>
            <span>{record[4]}</span>
        </li>
    ));

    const printHandler = () => console.log('使用浏览器打印功能');

    return (
        <div id="record">
            <h3>用户记录</h3>
            <ol>
                {records}
            </ol>
        </div>
    )
};

export default PerformanceRecord;

额外说明 #

• 原代码中map回调仅定义了JSX但未返回，导致records数组每一项都是undefined，React不会渲染此类内容。
• 移除了不必要的try/catch，jQuery的fail或fetch的catch已能捕获请求层面的错误；若需处理JSON.parse失败，可在对应位置添加捕获逻辑。
• 修正了printHandlder的拼写错误（应为printHandler）。

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