首先我是一個初學者。任何幫助，將不勝感激。所以我使用 node express API 從 mongoDB atlas 獲取我的資料。我成功地使用以下代碼讓陣列顯示在控制臺日志中。
const [product, setProduct] = useState();
const url = "http://localhost:5000/api/items";
useEffect(() => {
axios.get(url).then((res) => {
setProduct(res.data);
// setProduct(
// JSON.stringify({
// title: setProduct.title,
// price: setProduct.price,
// image: setProduct.image,
// details: setProduct.details,
// })
// );
})
}, [url])
console.log(product)
控制臺日志將陣列正確顯示為名為“items”的集合，其中包含陣列的內容。如您所見，我嘗試在回應回傳 JSON 時對回應進行字串化，但我又不知道如何映射 以下是我嘗試將 id、name 等內容作為道具映射到組件的代碼。
<div>
{product.map((product) => {
<Product name={product.title} />
})}
</div>
當我這樣做時，我收到地圖不是函式的錯誤。我不知道我在這里做錯了什么。我知道我應該在這里使用 redux 或 reducer/context，但我想在用它們更新之前讓它作業。
[![res.data 的回應][1]][1] [1]: https://i.stack.imgur.com/auxvl.png
uj5u.com熱心網友回復：
你沒有得到你的產品。
從截圖中我們可以看出
res.data等于具有一個屬性的物件items：
res.data={items: []}
我們需要獲取/訪問這些專案
用這個：setProducts(res?.data?.items || [])
const [products, setProducts] = useState();
useEffect(() => {
axios.get(url).then((res) => {
setProducts(res?.data?.items || []);
})
}, [url])
<div>
{products?.map((product) => {
<Product name={product.title} />
})}
</div>
uj5u.com熱心網友回復：
在第一次渲染時，型別的值將是未定義的（在同步代碼執行時），嘗試將其用作
<div>
{product?.map((product) => {
<Product name={product.name} />
})}
</div>
? 一旦型別的值存在，將確保運行 map （還要確保它是可映射的（是一個陣列））
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/457728.html
標籤：javascript 节点.js 反应 mongodb