我有一個 JSON 作為服務器，JSON 有一個“食譜”陣列，里面有物件
"recipes": [
{
"id": "1",
"title": "Arepa",
"description": "...",
"image": "...",
"preparation": "...",
"ingredients": "..",
"notes": "..."
},
{
"id": "2",
"title": "Burritos",
"description": "...",
"image": "...",
"preparation": "...",
"ingredients": "...",
"notes": "..."
}
I? 試圖將影像顯示到帶有回圈的滑塊中，但我唯一得到的是錯誤和挫折，我無法輕松獲取資料，但顯示它卻讓我出錯，我嘗試了很多東西，但沒有任何效果。這是我的代碼。
十大.js
import { CarouselProvider, Slider, ButtonBack, ButtonNext } from 'pure-react-carousel';
const Topten = () => {
return (
<div id="topTenContainer">
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={3}
>
<Slider>
//// here must be the images ////
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
</div>
);
};
export default Topten;
當我嘗試創建異步函式并嘗試放入時，出現此錯誤 =>Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.此處是示例
import database from "../api/database"
const Sliderr = async() =>{
const responde = await database.get('recipes');
const recipes = responde.data;
return(
{
recipes.map(post =>{
return(
<div key={post.id}>
<h1>{post.title}</h1>
</div>
)
})
}
)
}
export default Sliderr
請問有什么幫助嗎？
uj5u.com熱心網友回復：
可以在控制臺列印“recipe”和“responde”值嗎？如果可以列印，請嘗試將指定變數的常量從“const”拉到“var”。首先，確保回傳的答案。執行分步操作。
uj5u.com熱心網友回復：
recipes?.map(post =>{
return(
<div key={post?.id}>
<h1>{post?.title}</h1>
</div>
)
})
您必須檢查資料是否具有標題欄位使用標記問題呈現 h1 組件
uj5u.com熱心網友回復：
好吧，主要問題實際上正如日志中所述：您的 Sliderr 組件應該回傳一個非異步函式。當您在 jsx 塊中使用函式/功能組件“Sliderr”時，它會回傳一個 Promise，TopTen.js因為它被宣告為異步函式。
您可以處理 useEffect 內的異步方面，例如
const Topten = () => {
const [data, setData] = useState([]);
useEffect(() => {
const getPosts = async () => setData(await database.get('recipes'));
getPosts();
}, []);
return (
<div id="topTenContainer">
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={data.length}
>
<Slider>
{data.map(post => <Slide>{post.title}</Slide>)}
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
</div>
);
};
盡管將 post.title 作為 children-prop，您仍然需要將您的 Sliderr 組件重構為 Slide。
在此基礎上，您可以考慮將 api 呼叫提取到自定義鉤子中。
[編輯：抱歉我的樂觀態度。我省略了請求的錯誤處理]
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/365787.html
標籤：javascript 反应 json 异步 服务器
上一篇：reactjs中的多個輸入處理