为何函数返回值无法在React渲染中显示？console.log已得正确结果

问题根源 #

你的getName函数里用了axios.get异步请求，但函数本身是同步执行的，导致了以下问题：

1. 函数执行时，先发起异步请求，立刻返回初始的空字符串name，这时候React已经完成了当前的渲染，显示的是空值。
2. 等异步请求完成，then回调里给name赋值，但这个name是函数内部的局部变量，既不是组件状态，也不会触发React的重新渲染，所以页面不会更新显示正确的姓名。
3. 你在then里的console.log能看到正确值，是因为这行代码是在请求完成后才执行的，而此时函数早就返回了。

解决方案1：提前批量加载所有姓名（推荐） #

把所有需要的学生姓名提前加载并存在组件状态里，渲染时直接取状态值，避免在render里发起异步请求：

import { useState, useEffect } from 'react';
import axios from 'axios';

// 组件内部
const [studentNames, setStudentNames] = useState({});

useEffect(() => {
  // 批量请求所有学生的姓名
  const fetchAllNames = async () => {
    // 为每个学生ID创建一个请求Promise
    const nameRequests = results.map(item => 
      axios.get(`http://localhost:3001/students/names/${item.Student_ID}`)
        .then(res => ({
          id: item.Student_ID,
          fullName: `${res.data[0].Fname} ${res.data[0].Lname}`
        }))
    );

    // 等待所有请求完成
    const nameData = await Promise.all(nameRequests);
    // 把数据转成ID为key的对象，方便取值
    const nameMap = nameData.reduce((acc, curr) => {
      acc[curr.id] = curr.fullName;
      return acc;
    }, {});

    setStudentNames(nameMap);
  };

  // 当results数组有数据时才发起请求
  if (results.length > 0) {
    fetchAllNames();
  }
}, [results]); // 依赖results，当results变化时重新加载

// 渲染部分
{results.map((value, key) => (
  <tr key={key}>
    <td className='columnData'>
      {/* 显示姓名，加载时显示占位符 */}
      {studentNames[value.Student_ID] || '加载中...'}
    </td>
  </tr>
))}

解决方案2：用独立组件处理单个学生姓名的异步请求 #

创建一个专门的小组件，负责请求并渲染单个学生的姓名，这样每个学生的请求状态独立管理：

import { useState, useEffect } from 'react';
import axios from 'axios';

// 独立的StudentName组件
const StudentName = ({ studentId }) => {
  const [fullName, setFullName] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios.get(`http://localhost:3001/students/names/${studentId}`)
      .then(res => {
        setFullName(`${res.data[0].Fname} ${res.data[0].Lname}`);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('获取姓名失败:', err);
        setIsLoading(false);
      });
  }, [studentId]); // 当studentId变化时重新请求

  if (isLoading) {
    return <span>加载中...</span>;
  }
  return <span>{fullName}</span>;
};

// 原组件的渲染部分
{results.map((value, key) => (
  <tr key={key}>
    <td className='columnData'>
      <StudentName studentId={value.Student_ID} />
    </td>
  </tr>
))}

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