Promise对象后未呈现

Question

我一直试图在解决其承诺后显示map数组。不幸的是，它没有被渲染。下面是代码:

<View>
{array.map((item) => {
promiseFunction(item).then((res) => {
return (
<FunctionalComponent
prop={res.prop}
/>
);
});
})}
</View>

Answer 1

必须将异步函数与呈现分离。你必须正确地处理array.map。FunctionalComponent的道具列表必须是一个状态。

const [propsArray, setPropsArray] = useState([])
useEffect(() => {    // or any other function, that will feed data
array.map(item => {
promiseFunction(item).then(res => {
setPropsArray(p => [...p, res])
}
}, 
[])
return (<View>
{propsArray.map(c => (<FunctionalComponent prop={c.prop} />) }
</View>)

Answer 2

Array.prototype.map()不会等待Promise解析，所以数据永远不会呈现。你应该试试经典的……的。

const Foo = ({}) => {
const [components, setComponents] = useState([])
useEffect(() => {
(async () => {
for (const item of array) {
setComponents([...conponents, <FunctionalComponent prop={(await promiseFunction(item)).prop}/>])
}
})()
}
return (
<View>
{components}
</View> 
)
}

Answer 3

你不能直接这样做，因为React会尝试渲染一个承诺数组，当它们解决时已经太迟了，组件已经渲染了。前面的答案向您展示了如何设置在结果到来时声明结果，并仅在承诺实现后呈现结果。但是使用React@18，您可以跳过这一步，几乎直接渲染承诺。如果你正在使用悬念，有一种方法可以处理这种情况，因为挂起的组件能够直接使用承诺，并呈现回退，直到它们解决:

const arr = [1, 2, 3, 4, 5];
export default function App() {
return (
<Suspense fallback={<p>Loading.....</p>}>
<AsyncComponent />
</Suspense>
);
}
export const AsyncComponent = () => {
// THIS IS AN ARRAY OF PROMISES
const data = arr.map((el, i) => {
const d = useGetData(`https://jsonplaceholder.typicode.com/todos/${i + 1}`);
console.log(d);
return (
<h5>
{i + 1}:{d?.title}
</h5>
);
});
// HERE YOU RENDER THE PROMISES DIRECTLY
return <div>{data}</div>;
};

一个你可以玩的演示，在这里。