如何在React中为数据提交或获取正确实现加载提示

核心问题分析 #

• 仅设置了setLoading(true)开启加载状态，但未在请求完成（成功/失败）时调用setLoading(false)关闭状态，导致loading始终为true，加载提示逻辑异常。
• 后端index.js中storage.set用法错误：该方法需要传入键名和对应值两个参数，当前仅传了键名，无法正确存储数据，会导致前端返回值异常。

代码修正方案 #

1. 前端app.js：补充加载状态关闭逻辑 #

使用async/await配合try/catch/finally，确保无论请求成功或失败，都能关闭加载状态，同时优化数据展示逻辑：

import React, { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchAndStoreData = async () => {
      setLoading(true);
      try {
        const dx = { uid: 'NancyMoore' };
        const result = await invoke('postdata', dx);
        setData(result);
      } catch (err) {
        console.error('请求出错:', err);
        // 可在此添加前端错误提示，比如弹窗提示用户操作失败
      } finally {
        // 无论请求成功/失败，都关闭加载状态
        setLoading(false);
      }
    };

    fetchAndStoreData();
  }, []);

  return (
    <div>
      <h2>已提交数据</h2>
      {/* 加载时只显示提示，加载完成后展示数据 */}
      {loading ? <span>数据提交中...</span> : JSON.stringify(data)}
    </div>
  );
}

export default App;

2. 后端index.js：修复storage.set用法 #

将前端传来的请求参数存入storage，同时增加错误捕获：

import Resolver from '@forge/resolver';
const resolver = new Resolver();

resolver.define('postdata', async (req) => { 
  try {
    // 存储前端传入的payload数据
    const datax = await storage.set('my-key', req.payload);
    console.log(datax);
    return datax;
  } catch (err) {
    console.error('存储数据失败:', err);
    throw err; // 抛出错误让前端捕获处理
  }
});

export const handler = resolver.getDefinitions();

更优实践建议 #

• 用async/await替代链式then，代码可读性更强，错误处理更直观。
• 加载状态与数据展示互斥：避免加载中同时显示旧数据，提升用户体验。
• 完善错误处理：前端可增加用户可见的错误提示，后端需捕获并抛出异常，便于定位问题。

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