Question

我尝试渲染来自2个数据库的彼此匹配的数据通过使用

装载数据

//mount data from database
const { items } = this.props.item;
const { stocks } = this.props.stock;

我尝试在一个表中显示数据

name of stock | stock detail
    code1     | detailcode1
    code2     | detailcode2
    code3     | detailcode3

具有类似

的代码

{items.map(({ stockCode }) => (<td>{stockCode}</td>)
{stocks.map(({ stockCode,detail }) => (<td>{detail}</td>)

我想创建类似的功能 “如果来自database1的stockCode名称与database2匹配，则显示详细信息”

有人有主意吗？

Answer 1

您可以只使用一个.map并有条件地渲染该行：

{stocks.map(({ stockCode, detail }) =>
    items.some(({ stockCode: itemCode }) => stockCode === itemCode) ? (
        <tr>
            <td>{stockCode}</td>
            <td>{detail}</td>
        </tr>
    ) : null
)}

或者，如果要考虑性能，则可以创建一个Map，其StockCode为key，详细信息为value。然后在您的项数组上.map将匹配值从Map中拉出。

Answer 2

虽然@WillJenkins回答有效，但我不喜欢在每次重新渲染组件时重新计算匹配项的想法。如果您正在更改数据，则可以选择一种方法，但是由于您声明是从数据库获取的，因此我认为它不会更改。

在这种情况下，最好在加载数据后仅检查stock_code中条目的stocks是否在items中：

// after the data was loaded (NOT in the render method):
for (const stock of stocks) {
    const item = items.find(i => i.stock_code === stock.stock_code);

    if (item === undefined) continue;

    stock.item = item;
}

// in the table body (render method)
stocks.map(stock => {
    const { item } = stock;

    return (
        <tr>
            <td>{stock.stock_code}</td>
            <td>{stock.stock_name}</td>
            <td>{item && item.item_name}</td>
            <td>{item && item.item_price}</td>
        </tr>
    );
})

我快速编写了一个示例，您可以检出here。

尝试使用.map（）函数从2个不同的源渲染数据

2 个答案: