我正在構建一個 React-App，但在json/array使用.map()-function. 我的服務器端 json 物件看起來像：
let jsonlist = [
{
Title: "first title",
Listofitems: ["Item 01", "Item 02", "Item 03"]
},
{
Title: "second title",
Listofitems: ["Item 04", "Item 05", "Item 06"]
}
]
我的代碼客戶端示例如下所示：
const [lists, setmylist] = useState([]);
const fetchFact = () => {
fetch("http://myapi:4000/getmyList")
.then((response) => response.json())
.then((data) => setmylist(data));
}
useEffect(() => {
fetchFact()
}, []);
return (
<div className='container'>
{lists.map(singleobject => {
var test = Object.entries(singleobject);
{ console.log(test) }
{ console.log(test[0][0]) }
<p>{test[0][0]}</p>
})}
</div>
);
如果我運行它，我會得到{ console.log(test)} ：
[
[
"Title",
"first title"
],
[
"Listofitems",
[
"Item 01",
"Item 02",
"Item 03"
]
]
]
但是 <p>{test[0][0]}</p> 不顯示。如果我改變
{lists.map(singleobject => {})}
類似于
{projects.map(singleproject => (
<p key={hereineedauniqueid}>Just checkin</p>
))}
Just checkin像我想要的那樣顯示 2 次，但我不知道如何從json/array. 我需要更改的結構json/array還是需要更改我的代碼？
我想我需要使用該{lists.map(singleobject => {})}函式，因為我想為 中的每個元素創建一個表和一個react-bootstrap/Modal，json/array并希望顯示json/array每個特定模式中的值
謝謝你的幫助
uj5u.com熱心網友回復：
您在此回呼中將普通 JavaScript 語法與 JSX 語法混為一談：
.map(singleobject => {
var test = Object.entries(singleobject);
{ console.log(test) }
{ console.log(test[0][0]) }
<p>{test[0][0]}</p>
})}
{ expression }在將運算式插入 React 組件（或除錯時，用于副作用）時，在 JSX中的語法很有用。但是你不是在 JSX 的背景關系中——你是在一個普通的 JavaScript 函式中。你{}的 s 表示普通的 blocks。
{ console.log(test) }
就像在做
if (true) {
console.log(test)
}
然后，如果你在 JSX 中，把
<p>{test[0][0]}</p>
插值日志旁邊可以作業 - 但同樣，您不在 JSX 中。您需要回傳<p>才能查看結果。但是，如果您想顯示值包含的內容并遍歷每個條目，請考慮.map在物件的條目上回傳 a ，而不是這樣做。
const App = () => {
const lists = [
{
Title: "first title",
Listofitems: ["Item 01", "Item 02", "Item 03"]
},
{
Title: "second title",
Listofitems: ["Item 04", "Item 05", "Item 06"]
}
];
return (
<div className='container'>
{lists.map(singleobject => Object.entries(singleobject)
.map(([key, value]) => (
<div>
<div>Key: {key}</div>
<div>Value is a: {typeof value}</div>
</div>
))
)}
</div>
);
};
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>但是因為每個物件的鍵都是相同的，所以回圈訪問條目似乎是多余的。.Title直接參考and會更容易Listofitems。
const App = () => {
const lists = [
{
Title: "first title",
Listofitems: ["Item 01", "Item 02", "Item 03"]
},
{
Title: "second title",
Listofitems: ["Item 04", "Item 05", "Item 06"]
}
];
return (
<div className='container'>
{lists.map(singleobject => (
<div>
<div>{singleobject.Title}</div>
<div>{singleobject.Listofitems.join(', ')}</div>
</div>
))}
</div>
);
};
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>uj5u.com熱心網友回復：
我認為不需要Object.entries在每個物件上使用。我會將它們保留為物件，并與它們的key/value配對一起將事物呈現給 DOM。
例如，使用您的jsonlist：
let jsonlist = [
{
Title: "first title",
Listofitems: ["Item 01", "Item 02", "Item 03"]
},
{
Title: "second title",
Listofitems: ["Item 04", "Item 05", "Item 06"]
}
]
您可以像這樣簡單地渲染第一個物件：
return (
<div className='container'>
{lists.map(singleobject => {
return (
<div>
<h3>{singleobject.Title}</h3>
<ol>
{singleobject.Listofitems.map(item => {
return <li>{item}</li>
})
</ol>
</div>
)
})}
</div>
如果您要為串列中的每個物件構建一個組件，您可以將資訊作為道具傳遞給lists.map(singleobject => {})函式中的組件。
uj5u.com熱心網友回復：
就這樣做
return (<p>{test[0][0]}</p>);
你只需要知道箭頭函式的基礎知識
uj5u.com熱心網友回復：
如果將介面分解為更小的組件，可能會更容易考慮問題。你知道這data是一個你必須map覆寫的物件陣列，但你listofitems也是一個陣列，所以你也應該覆寫這些物件是有道理map的。
因此，在您的容器中map，通過從端點獲得的資料，為每個物件生成一個新串列（帶有標題和進一步的專案串列）。您可以為此使用一個單獨的List組件，將當前的迭代物件傳遞給該組件。（您在問題中提到您想要一個表格，但由于我不知道您想要的表格的格式，因此更容易生成串列 - 但原則仍然有效。用表格行組件替換List和，ListItem和一個表格單元組件）。
在您的List組件中，您可以為標題創建一個元素和一個串列元素，然后在其中使用ListItem組件映射物件的專案串列。
請注意，通過這樣做，您需要為key您正在迭代的元素添加一個屬性（或者 React 會給您一個警告）。因此，考慮到這一點，本示例重構資料以賦予每個物件一個id，并為每個專案創建物件，每個專案也具有自己的 id。
例如：
[{ id: 1, title: 'first title', items: [{ id: 1-1, value: 'Item 01' }...]
const data=[{title:"first title",items:["Item 01","Item 02","Item 03"]},{title:"second title",items:["Item 04","Item 05","Item 06"]}];
// Create an updated dataset with ids
const updated = data.map((obj, id) => {
obj.id = id 1;
obj.items = obj.items.map((item, id) => {
return { id: `${obj.id}-${id 1}`, value: item };
});
return obj;
});
// For this example passing in the data to
// the component rather than fetching it
// `map` over the array and, for each obj create
// a list with the List component
function Example({ data }) {
return (
<div className="container">
{data.map(obj => {
return <List key={obj.id} obj={obj} />
})}
</div>
);
}
// The List component accepts an object, and
// we can destructure the title, and items, from
// the object. We create a title, and a list element
// and then `map` again over the items array to create
// a set of list items with the ListItem component
function List({ obj }) {
const { title, items } = obj;
return (
<div className="list">
<div className="title">{title}</div>
<ul>
{items.map(item => {
const { id, value } = item;
return <ListItem key={item.id} item={value} />
})}
</ul>
</div>
);
}
// Accepts an item, and returns
// a list item element
function ListItem({ item }) {
return <li>{item}</li>;
}
ReactDOM.render(
<Example data={updated} />,
document.getElementById('react')
);.title { text-transform: uppercase; }
ul { list-style: none; margin-left: 0px; padding: 0px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525737.html
上一篇：文本陣列的影片在幾個條目后停止