React中数据库数据获取后修改及UI渲染问题求助

首先咱们来拆解下你遇到的问题：

1. 你的getFirst函数没有返回值，所以哪怕内部能拿到salary，外部调用await getFirst()也拿不到实际数据；
2. details里的salary字段赋值的是一个异步函数，UI渲染时直接使用这个字段的话，拿到的只是一个Promise对象，而非解析后的薪资数值。

下面是分步修复方案：

1. 修复getFirst函数，让它返回数据 #

首先要让这个异步函数把拿到的薪资值返回出去，不然外部调用等于白忙活：

// 假设这是你的db.js或对应文件
export const getFirst = async () => { 
  const test = await getLatestData(); 
  // 关键：把获取到的salary返回出去
  return test.data[0].salary; 
};

另外顺便优化下getLatestData，里面的.then(res => res)完全是多余的，await axios.get(url)本身就会返回响应对象：

export const getLatestData = async () => { 
  const url = `${testDB.serverUrl}/findLatestTen`; 
  const res = await axios.get(url); 
  return res; 
};

2. 正确处理employee.js中的异步数据渲染 #

你不能直接在details常量里把salary设为异步函数，因为UI组件无法直接解析这个Promise。这里分两种常见场景处理：

场景一：React/Vue等框架项目（最常用） #

建议在组件的生命周期/setup钩子中先获取数据，再把数据注入到details结构中，同时处理加载状态：

以React为例，重构employee.js和组件：

// employee.js
import { getFirst } from './你的文件路径';

// 封装一个获取员工详情的异步函数
export const fetchEmployeeDetails = async () => {
  const firstSalary = await getFirst();
  // 拿到数据后再返回完整的details结构
  return [ 
    { 
      title: 'HR', 
      links: [ 
        { title: 'Employee 1', salary: firstSalary }, 
        { title: 'Employee 2', salary: firstSalary } 
      ] 
    } 
  ];
};

然后在React组件中使用：

import { fetchEmployeeDetails } from './employee';
import { useEffect, useState } from 'react';

function EmployeeList() {
  const [details, setDetails] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 封装异步逻辑到函数中
    const loadData = async () => {
      try {
        const data = await fetchEmployeeDetails();
        setDetails(data);
      } catch (err) {
        console.error('加载数据失败：', err);
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, []);

  // 显示加载状态
  if (isLoading) return <div>正在加载薪资数据...</div>;

  // 渲染实际数据
  return (
    <div className="employee-container">
      {details.map(dept => (
        <div key={dept.title} className="department">
          <h2>{dept.title}</h2>
          <ul>
            {dept.links.map(emp => (
              <li key={emp.title}>
                {emp.title}：薪资 ${emp.salary}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

场景二：非框架的纯JS项目 #

如果是纯前端项目，你需要手动在页面加载时获取数据，再更新DOM：

// employee.js
export const detailsTemplate = [ 
  { 
    title: 'HR', 
    links: [ 
      { title: 'Employee 1', salary: null }, 
      { title: 'Employee 2', salary: null } 
    ] 
  } 
];

export const loadSalaryData = async () => {
  const firstSalary = await getFirst();
  // 填充薪资数据
  detailsTemplate[0].links.forEach(emp => {
    emp.salary = firstSalary;
  });
  // 调用渲染函数
  renderEmployeeDetails();
};

// 渲染DOM的函数
function renderEmployeeDetails() {
  const container = document.getElementById('employee-container');
  if (!container) return;

  container.innerHTML = detailsTemplate.map(dept => `
    <div class="department">
      <h2>${dept.title}</h2>
      <ul>
        ${dept.links.map(emp => `<li>${emp.title}：薪资 $${emp.salary}</li>`).join('')}
      </ul>
    </div>
  `).join('');
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', loadSalaryData);

核心总结 #

• 异步函数必须返回值，外部才能通过await或.then()拿到结果；
• UI渲染异步数据时，必须先等待Promise解析完成，再把实际数据传递给渲染逻辑，不能直接把异步函数作为数值使用；
• 始终记得处理加载状态和异常情况，提升用户体验。

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