如何遍历Promise返回的异步结果并渲染到React组件中

问题场景 #

根本原因是对JavaScript中的Async、Promises异步机制掌握不足，具体遇到的情况：

• 调用异步API获取人员信息时，Chrome控制台可观测到返回结果为处于fulfilled状态的Promise，其[[PromiseResult]]属性是长度为12的人员对象数组，数组第一项的结构示例：

Promise {<fulfilled>: Array(12)}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(12)
0:
id: "ec6eee79-5ab8-44a9-8fbf-35668ec3a668"
name: "John Travolta"
__proto__: Object

• 编写简易React组件尝试遍历上述人员数据完成页面渲染时，现有写法无法正常运行，触发报错的列表遍历代码段已经被注释屏蔽。
• 核心诉求：调整现有组件代码，将接口返回的人员列表正常遍历展示到页面中。

现有组件代码 #

const UserComponent = (props) => {
  const results = API.getSomePeopleInfo().then((response) => {
    const result = Promise.resolve(response.data);
    console.log("so data was this: ", result);
  });

  return (
    <div>
      <h1>A user</h1>
      {/*{results.map((r) => (*/}
      {/*  <li>{r.name}</li>*/}
      {/*))}*/}
    </div>
  );
};

代码问题根源 #

• results变量存储的是API.getSomePeopleInfo()返回的Promise实例，不是解包后的数组数据，对Promise实例调用map方法会直接触发类型报错。
• .then回调内的Promise.resolve(response.data)属于冗余操作：接口响应已经拿到可遍历的人员数组，再包一层Promise会导致日志打印的依然是Promise对象，不是实际的人员数据。
• React组件的渲染流程是同步执行的，首次渲染阶段异步请求还未返回结果，直接在渲染作用域内读取异步回调内的变量，永远无法拿到请求完成后的最新数据。

代码调整方案 #

要实现异步数据的正常渲染，需要结合React的状态管理机制配合异步请求的逻辑：

• 用useState钩子存储人员列表数据，初始化值设为空数组，作为渲染时可读取的响应式数据源。
• 用useEffect钩子在组件挂载阶段触发接口请求，在请求的.then回调中直接从响应里取出实际的人员数组，调用state的更新方法把数据写入state，触发组件重新渲染。
• 渲染阶段直接遍历state中存储的数组即可，遍历过程中给每个列表项绑定唯一的key属性（可以直接用人员对象的id字段，避免React渲染警告）。

调整后的可运行代码示例：

import { useState, useEffect } from 'react';

const UserComponent = (props) => {
  // 存储异步获取的人员列表，初始为空数组
  const [peopleList, setPeopleList] = useState([]);

  useEffect(() => {
    // 组件挂载时发起接口请求
    API.getSomePeopleInfo().then((response) => {
      // 直接取出响应中的实际人员数组，更新state
      setPeopleList(response.data);
    });
  }, []);

  return (
    <div>
      <h1>A user</h1>
      {/* 直接遍历state中的人员列表完成渲染 */}
      {peopleList.map((person) => (
        <li key={person.id}>{person.name}</li>
      ))}
    </div>
  );
};

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