[英]How can I Include data in my map from another Array?
我有以下代碼：
const OrderLines = (props) => {
const { orderlines } = props
const { items } = props
console.log(items)
if (orderlines === undefined) {
return (
<div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
)
}
if (orderlines instanceof Array) {
return (
<div className="bg-white">
<table className="min-w-full mx-12 divide-y divide-gray-200">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{orderlines instanceof Array && orderlines.map(order =>
order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
if (line.quantity != line.checkedIn) {
return (
<tr>
<td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
<td className="px-6 py-4 whitespace-no-wrap"></td>
</tr>)
}
}))}
</tbody>
</table>
</div>
)
}
如您所見，我在訂單行上使用 .map() 來返回我想要的信息。
我嘗試了各種化身，但無法讓我的數據配對。
我想要實現的是使用與“行”項匹配的“項”數組中的數據
所以 line.itemID === item.itemID
希望你明白我的意思，我如何在我的訂單映射（）中包含項目的數據？
所以。 我有這個，如果我在頁面加載之后而不是之前添加，它會起作用：
{orderlines instanceof Array && orderlines.map(order =>
order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
if (line.quantity != line.checkedIn) {
const item = items.find(item => item.itemID === line.itemID)
console.log(items)
return (
<tr>
<td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
</tr>)
}
}))}
當代碼運行時，項目似乎沒有保存我需要的數據。
而且，她工作。 謝謝您的幫助！
const OrderLines = (props) => {
const { orderlines } = props
const { items } = props
if (orderlines === undefined) {
return (
<div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
)
}
if (orderlines instanceof Array) {
return (
<div className="bg-white">
<table className="min-w-full mx-12 divide-y divide-gray-200">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Item ID</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{orderlines instanceof Array && orderlines.map(order =>
order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
if (line.quantity != line.checkedIn) {
const item = items.find(item => item.itemID === line.itemID)
console.log(items)
if (!item) {
return <div>Loading!!!</div>
}
return (
<tr>
<td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
<td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
</tr>)
}
}))}
</tbody>
</table>
</div>
)
}
你可以做這樣的事情。 引入一個功能，允許您通過項目列表進行search請參閱下面的search功能。 雖然這也可以內聯實現。
// adding some default values for presentation, in your case you are fetching it from props or state
const orderlines = [
{itemID: 0, someAttr: 'A'},
{itemID: 1, someAttr: 'B'},
{itemID: 2, someAttr: 'C'},
];
// adding some default values for presentation, in your case you are fetching it from props or state
const items = [
{name: 'somename', itemID: 2},
{name: 'somename 2', itemID: 3},
{name: 'somename 3', itemID: 11}
]
function search(id) {
const result = items.filter(item => item.itemID === id);
return result && result.length ? result[0] : null;
}
orderlines.forEach(order => {
console.log(order.itemID);
const found = search(order.itemID);
if(found) {
console.log('print row', order, found)
};
});
為方便起見，請參閱https://repl.it/repls/SturdyLiquidUsers#index.js
大致您的代碼必須更新為如下所示
const OrderLines = (props) => {
const { orderlines } = props
const { items } = props
function search(id) {
const result = items.filter(item => item.itemID === id);
return result && result.length ? result[0] : null;
}
console.log(items)
if (orderlines === undefined) {
return (
<div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
)
}
if (orderlines instanceof Array) {
return (
<div className="bg-white">
<table className="min-w-full mx-12 divide-y divide-gray-200">
<thead>
<tr>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
<th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{orderlines instanceof Array && orderlines.map(order =>
order.OrderLines.OrderLine instanceof Array && order.OrderLines.OrderLine.map(line => {
const found = search(order.itemID);
if (line.quantity != line.checkedIn) {
return (
<tr>
<td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
<td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
<td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
<td className="px-6 py-4 whitespace-no-wrap">{
found && <span>{found}</span>
}</td>
</tr>)
}
}))}
</tbody>
</table>
</div>
)
}
如何從本地文件夾中引用圖像並映射它並根據我的數組中的數據在反應中顯示圖像？
[英]How can I refer images from local folder and map it and show the images according to the data in my array in react?
如何從Backbone / Coffee中的另一個視圖函數訪問@map對象？
[英]How can I access my @map object from another view function in Backbone/Coffee?
如何排序 / map / 過濾以下 javascript 對象數組從一種格式到另一種格式
[英]How can I sort / map / filter the following javascript array of objects from one format to another
我如何 map 一個從數組末尾到開頭的數組？
[英]How can i map an array starting from the end of the array to the beginning?
如何從一個陣列是另一個數組內檢索數據，並在表中顯示了嗎？
[英]How can I retrieve data from an array which is inside another array and display it in the table?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.