在解決了它的承諾后，我一直在嘗試顯示 map 一個陣列。不幸的是，它沒有被渲染。這是代碼：
<View>
{array.map((item) => {
promiseFunction(item).then((res) => {
return (
<FunctionalComponent
prop={res.prop}
/>
);
});
})}
</View>
uj5u.com熱心網友回復：
您必須將異步功能與渲染分開。你必須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>)
uj5u.com熱心網友回復：
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>
)
}
uj5u.com熱心網友回復：
您不能像您嘗試那樣直接這樣做，因為 React 將嘗試渲染一組 Promise，當它們解決時，組件已經渲染為時已晚。以前的答案向您展示了如何設定結果，一旦它們出現并僅在承諾完成后呈現。但是使用 React@18，你可以跳過這一步，幾乎直接呈現Promise 。如果您使用 Suspense，有一種方法可以處理這種情況，因為Suspended組件能夠直接使用 Promise 并呈現回退直到它們解決：
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>;
};
一個你可以玩的演示，這里。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/463372.html
標籤：javascript 反应 反应式 世博会