React.js+TypeScript项目中如何展示API调用返回的结果？

实现步骤 #

• 第一步：新增状态存储API返回数据，同时定义TS类型保证类型安全
  在组件内部先定义返回数据的接口，再声明状态：

// 定义API返回数据的TS类型
interface ApiResponse {
  message: string; // 可根据实际业务调整类型，比如number、boolean等
  validity: boolean; // 可根据实际业务调整类型
}

// 组件内部新增状态
const [apiResult, setApiResult] = useState<ApiResponse | null>(null);

• 第二步：修改upload回调逻辑，请求成功后将返回数据存入状态
  修改你提供的第一部分代码，在请求成功后调用setApiResult存数据：

const upload = React.useCallback(async () => {
  try {
    const response = await mymethod(
      user,
      pass,
      onUpload
    );
    setSuccess(true);
    setUploading(false);
    // 新增：将返回的data存入状态
    setApiResult(response.data);
    return { body: response.data};    
  }              
}, [
  pass,
  user,       
]      
);

• 第三步：在指定位置渲染返回结果
  修改第二部分代码的对应位置，直接读取状态值渲染即可，用可选链避免空值报错：

return (
  <AuthLayout showInfo={true}>
    <div className={classes.root}>                
        <Container>
          <Box
            display="flex"
            flexDirection="column"
            alignItems="center"                    
          >
            {uploading ? (
              <>
                <BorderLinearProgress
                  variant="determinate"
                  value={progress}
                />
              
              </>
            ) : success ? (
              <>
                <CheckCircleOutline
                  className={classes.successIcon}
                  fontSize="inherit"
                />        
                <div>
                  {/* 此处展示API返回结果 */}
                  <p>返回消息：{apiResult?.message}</p>
                  <p>有效性：{apiResult?.validity ? '有效' : '无效'}</p>
                  {/* 如果需要直接展示完整JSON结构可以用以下写法 */}
                  <pre>{JSON.stringify(apiResult, null, 2)}</pre>
                </div>                        
  
              </>
            ) : (
              <>                         
              
              </>
            )}
          </Box>
        </Container>
      </Box>
    </div>
  </AuthLayout>
);  

补充说明 #

如果需要在重置上传状态时清空历史返回结果，可以在上传开始、或者上传失败的逻辑里调用setApiResult(null)即可。

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