我正在嘗試使用一組反應資料創建產品串列。我想從這些資料中回傳標題并將其顯示在螢屏上的串列中。我正在嘗試使用 forEach 回圈，但我是。不確定如何實作這一目標。
這是我到目前為止所擁有的：
import info from "./info";
import React from "react";
const ProductList = () => {
function listItems(item) {
return (
<Listbox.Option>
<Heading>{node.title}</Heading>
</Listbox.Option>
);
}
info.data.products.edges.forEach(listItems);
return listItems();
};
export default ProductList;
誰能告訴我哪里出錯了？
uj5u.com熱心網友回復：
你能不能把它簡化成一個看起來像這樣的版本：
import info from "./info";
import React from "react";
const ProductList = () => {
return info.data.products.edges.map((node) => (
<Listbox.Option>
<Heading>{node.title}</Heading>
</Listbox.Option>
));
};
export default ProductList;
這對你有用嗎？
uj5u.com熱心網友回復：
map每次你想在 React 中渲染串列時使用，如下所示：
import info from "./info";
import React from "react";
const ProductList = () => {
function listItems(item) {
return (
<Listbox.Option>
<Heading>{node.title}</Heading>
</Listbox.Option>
);
}
return (<div>{info.data.products.edges.map(item=>listItems(item))}</div>)
};
export default ProductList;
uj5u.com熱心網友回復：
你可以做類似下面的事情：
var data = [
{
id: 1,
title: "Test1"
},
{
id: 2,
title: "Test2"
}
];
export default function App() {
return (
<ul>
{data.map((x) => {
return <li key={x.id}>{x.title}</li>;
})}
</ul>
);
}您可以在沙箱中運行代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479168.html
標籤：javascript 反应 北极星