React中setTickets无法等待Promise获取数据，如何修复？

核心问题分析 #

• getSavedTickets函数未返回异步操作的Promise，导致外部无法等待其执行完成
• 组件中手动包裹Promise的方式无效，因为getSavedTickets没有返回有效异步结果
• tickets初始状态设为空字符串，易引发类型判断混乱

修复后的getSavedTickets函数 #

function getSavedTickets() {
  // 无cookie时返回resolved的空数组Promise
  if (document.cookie.length === 0) {
    return Promise.resolve([]);
  }

  // 返回fetch的完整Promise链，让外部可等待结果
  return fetch(`http://${myIP}:3001/ticketCheck`, {
    method: 'POST',
    mode: 'cors',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ "user": [{ username: document.cookie.split('=')[1] }] })
  })
  .then(response => {
    // 检查请求是否成功，避免json()解析报错
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(response => {
    // 确保返回数组，避免undefined
    return response.dbRes || [];
  })
  .catch(error => {
    console.error('获取票据失败:', error);
    // 出错时返回空数组，防止组件崩溃
    return [];
  });
}

export default getSavedTickets;

修复后的组件代码 #

import React, { useState, useEffect } from 'react';
import getSavedTickets from './getTickets';

function SubmissionForm () {
  // 初始状态设为空数组，和后续返回值类型统一
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    // 直接调用异步函数，通过then更新状态
    getSavedTickets().then(fetchedTickets => {
      setTickets(fetchedTickets);
    });

    // 也可使用async/await写法：
    // const fetchTickets = async () => {
    //   const fetchedTickets = await getSavedTickets();
    //   setTickets(fetchedTickets);
    // };
    // fetchTickets();
  }, []);

  return (
    <div>
      {/* 初始为空数组时map不会渲染内容，无需额外判断 */}
      {tickets.map(ticket => (
        <li key={ticket.id}>
          From: {ticket.afrom} Subject: {ticket.asubject} Body: {ticket.abody}
        </li>
      ))}
    </div>
  )
}

export default SubmissionForm;

关键修复点说明 #

1. 返回Promise链：让getSavedTickets直接返回fetch的Promise，确保外部能等待异步操作完成
2. 错误处理：增加请求失败和解析失败的捕获逻辑，避免组件崩溃
3. 统一状态类型：将tickets初始状态设为空数组，简化渲染时的判断逻辑
4. 简化useEffect逻辑：无需手动包裹新Promise，直接调用异步函数并更新状态

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