如何循环遍历Promise的结果并将其传递给React组件

Question

我认为这是因为我需要在JS中更多地了解Async和Promises但是我有一些Async API返回一些人的信息，在它的结构中显示在Chrome的控制台。我复制了第一个:

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

所以我现在写了一个简单的组件来循环它们，但显然这不是正确的方式。我不得不把不合格的部分注释掉。但这正是我希望完成的事情。那么我该如何改变呢?

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>
);
};

Answer 1

你正在使用异步函数，这不会立即解决，这意味着当你到达渲染方法时，结果将没有数据。你可以让它成为一个状态变量并在then回调中更新它:

import { useState } from 'react'
const UserComponent = (props) => {
// Using react with hooks
const [results, setResults] = useState([]);
API.getSomePeopleInfo().then((response) => {
const peoples = response.data;
setResults(peoples)
});
return (
<div>
<h1>A user</h1>
{/*{results && results.map((r) => (*/}
{/*  <li>{r.name}</li>*/}
{/*))}*/}
</div>
);
};