Reactjs 尝试使用.map（）函数呈现来自2个不同源的数据

我尝试从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>)

{items.map（{stockCode}）=>（{stockCode}）
{stocks.map（{stockCode，detail}）=>（{detail}）

我想创建如下函数 “如果数据库1中的stockCode名称与数据库2匹配，则显示详细信息”

---

有人知道吗？

您可以使用一个

.map

并有条件地渲染行：

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

{stocks.map（{stockCode，detail}）=>
一些（{stockCode:itemCode}=>stockCode===itemCode）(
{stockCode}
{detail}
)：null
)}

---

或者，如果性能是一个问题，您可以使用stockCode作为

键

，详细信息作为

值

。然后在项目数组上

映射

，从映射中提取匹配值。

虽然@WillJenkins answer有效，但我不喜欢每次重新呈现组件时都重新计算匹配的想法如果您的数据正在更改，这可能是一个不错的选择，但由于您声明从数据库获取此数据，我假设它不会更改

在这种情况下，最好在加载数据后只检查一次

stocks

中条目的

stock\u code

是否在

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>
    );
})

//加载数据后（不在呈现方法中）：
for（库存的常量）{
const item=items.find（i=>i.stock\u代码===stock.stock\u代码）；
如果（项目===未定义）继续；
stock.item=项目；
}
//在表体中（渲染方法）
stocks.map（stock=>{
const{item}=库存；
返回(
{stock.stock_code}
{stock.stock_name}
{item&&item.item_name}
{item&&item.item_price}
);
})

---

我很快编写了一个示例，您可以查看。

虽然这可能有效，但我个人并不喜欢。每次重新渲染时调用

包括
（现在是
一些
），从性能上看似乎不是太好。“似乎不是太好”看起来不是很定量，我手头当然没有性能指标，但这显然是一次操作，您将检查一次项目是否存在于第二个数组中，并记住它是否存在。在第二个数组中搜索第一个数组中的每个项目，每次重新渲染都没有意义。如果道具如果不更改，并且组件保持挂载状态，则这将是一次性操作。如果数据更改，则需要重新呈现。由于他从数据库获取数据，并且我假设它不是实时数据库，因此数据不太可能更改。