React页面无法渲染map遍历结果问题求助

尝试在React页面渲染对象列表，控制台中使用map方法能正确输出nombresolicitud字段信息，但页面刷新后始终没有内容显示。

代码如下：

import React from "react";
import { useState } from 'react'
import Swal from 'sweetalert2'
import AuthService from "../services/auth.service";
import { FcInfo } from 'react-icons/fc'
import { AiFillEdit } from 'react-icons/ai'
import { FiDelete } from 'react-icons/fi'
import { Card, InputGroup, FormControl, Button, DropdownButton, Dropdown,Table} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../auth/login.css'

import solicitudeService from "../services/solicitude.service";
import edificeService from "../services/edifice.service";
import { render } from "@testing-library/react";

function MySolicitudes(){
var data=[]
    solicitudeService.getAll().then(response =>{
        data=response.data
        data.map((val, key)=>{
             console.log("TEST:",val.nombresolicitud,key);
        });
        console.log(data);
    }).catch(e=>{
        console.log(e);
    });
    
    
   
    return(
        <div className="container">
       <h3>Lista Espacios</h3>
        <ul className="list-group">
          {data && data.map((val,index) =>{
           
           
           return( <li key={index}>
                {val.nombresolicitud}
            </li>);
            
          })

          }
        </ul>
        </div>
    );
} export default MySolicitudes;

解决方案 #

问题根源 #

你使用普通变量data存储请求结果，但React组件只有状态或属性更新时才会触发重新渲染。异步请求完成后修改data的值，不会触发组件重渲染，所以页面始终显示初始的空数组内容。

修复步骤 #

1. 用useState定义状态变量存储请求数据，确保数据更新时触发组件重渲染
2. 用useEffect包裹异步请求，避免组件每次渲染都重复发起请求

修改后的代码 #

import React, { useState, useEffect } from "react";
import Swal from 'sweetalert2'
import AuthService from "../services/auth.service";
import { FcInfo } from 'react-icons/fc'
import { AiFillEdit } from 'react-icons/ai'
import { FiDelete } from 'react-icons/fi'
import { Card, InputGroup, FormControl, Button, DropdownButton, Dropdown,Table} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../auth/login.css'

import solicitudeService from "../services/solicitude.service";
import edificeService from "../services/edifice.service";

function MySolicitudes(){
    // 用useState定义状态变量
    const [data, setData] = useState([]);

    // 用useEffect执行异步请求，仅组件挂载时执行一次
    useEffect(() => {
        solicitudeService.getAll().then(response =>{
            // 更新状态，触发组件重渲染
            setData(response.data);
        }).catch(e=>{
            console.log(e);
        });
    }, []); // 空依赖数组确保只执行一次
    
    return(
        <div className="container">
            <h3>Lista Espacios</h3>
            <ul className="list-group">
                {data.map((val,index) =>(
                    <li key={index}>
                        {val.nombresolicitud}
                    </li>
                ))}
            </ul>
        </div>
    );
} 

export default MySolicitudes;

额外优化建议 #

• 避免用数组索引作为key，如果数据有唯一标识（比如id），改用唯一标识作为key，防止列表更新时出现渲染异常
• 可添加加载状态，在请求未完成时显示“加载中...”提示，提升用户体验

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