如何格式化Promise.all结果？React中使用DB返回对象的最佳实践

我从数据库获取了如下对象，目前仅能将其打印到控制台。请问如何将其用于格式化控制台输出，例如：

console.log(`Hello ${name} (${age}) from ${city}`);

同时，我是否需要将其保存到本地数组后再在React组件中使用？对应的最佳实践是什么？

获取到的对象： #

{ name: 'alice', city: 'New York', age: 34 }

相关Promise代码： #

Promise.all(promises).then(([res1, res2]) => {
  getProfile(res1, res2).then(console.log);
})

一、格式化控制台输出 #

直接在then回调里处理获取到的对象，用模板字符串输出即可，无需额外存到数组：

Promise.all(promises).then(([res1, res2]) => {
  getProfile(res1, res2).then(profile => {
    // 解构对象属性，写法更简洁
    const { name, age, city } = profile;
    console.log(`Hello ${name} (${age}) from ${city}`);
  });
})

也可以直接在模板字符串中访问对象属性：

Promise.all(promises).then(([res1, res2]) => {
  getProfile(res1, res2).then(profile => {
    console.log(`Hello ${profile.name} (${profile.age}) from ${profile.city}`);
  });
})

二、React组件中的使用最佳实践 #

不需要先存到本地数组，React中推荐用状态管理来处理异步获取的数据，具体分两种场景：

• 组件内部状态：如果数据只在当前组件或其子组件使用，用useState配合useEffect（函数组件）或者componentDidMount（类组件）来管理：
  函数组件示例：

  import { useState, useEffect } from 'react';
  
  function ProfileComponent() {
    const [profile, setProfile] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      // 假设promises是已定义的请求数组
      Promise.all(promises)
        .then(([res1, res2]) => getProfile(res1, res2))
        .then(fetchedProfile => {
          setProfile(fetchedProfile);
          setLoading(false);
        })
        .catch(err => {
          setError(err);
          setLoading(false);
        });
    }, []); // 空依赖数组确保组件挂载时只执行一次
  
    if (loading) return <div>加载中...</div>;
    if (error) return <div>获取数据失败：{error.message}</div>;
  
    return (
      <div>
        <h1>Hello {profile.name} ({profile.age}) from {profile.city}</h1>
      </div>
    );
  }
  

• 全局状态管理：如果数据需要在多个不相关的组件中共享（比如全局用户信息），推荐用Redux、Zustand、Jotai这类状态管理库，把异步请求逻辑放到action或store的异步方法里，组件通过钩子直接获取状态即可。

核心原则： #

• 避免直接存到本地数组（临时计算的中间数据除外），因为React组件依赖状态更新触发重新渲染，本地数组的变化不会让组件刷新。
• 必须处理异步请求的加载状态和错误状态，提升用户体验。
• 函数组件优先使用useEffect+useState的组合，类组件用生命周期钩子配合state。

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