首次加载后刷新页面出现React映射错误，求解决方案

尝试从两个数组props计算持仓总价值：通过map渲染portfolio数组，用其中的stockId在stocks数组中匹配对应股票价格，再和持仓数量相乘。首次加载时能正常渲染结果，但刷新页面后会出现映射错误。

数据结构 #

// profile 对象结构
{
  name,
  portfolio: [
    {
      stockId, // 关联 stocks 数组中的 id
      stockName,
      quantity
    }
  ]
}

// stocks 数组结构
[
  {
    id,
    stockName,
    stockPrice
  }
]

相关代码 #

import React from "react";

const MyPortfolio= ({profile, stocks}) => {
   
    const findIndex = (id) => {
        const index = stocks.findIndex(index => index._id === id)
        return stocks[index].stockPrice;
    }

return (
    <section>
        <h3>{profile.username}</h3>
        <p>{profile.money}</p>
        <p>Portfolio</p>
            <ul>
                {profile.portfolio ? profile.portfolio.map((ownedStock) => (
                    <li key={ownedStock.stockId}>
                    {ownedStock.stockName} <br/>
                    {ownedStock.quantity} <br/>
                    Current Worth: {parseInt(ownedStock.quantity) * parseInt(findIndex(ownedStock.stockId)}
                    </li>
                )): null}
            </ul>
    </section>
)
}

export default MyPortfolio;

问题根源 #

刷新报错主要来自四个问题：

1. 字段匹配错误：stocks数组的id字段是id，但代码里写的是index._id，导致找不到对应股票；
2. 未处理无匹配项的情况：findIndex找不到对应项时返回-1，此时访问stocks[-1].stockPrice会直接报错；
3. 语法错误：parseInt(findIndex(ownedStock.stockId))少了闭合括号；
4. 未处理异步加载状态：刷新时stocks或profile可能还未获取到数据，直接渲染会读取未定义属性。

修复后的代码 #

import React from "react";

const MyPortfolio= ({profile, stocks}) => {
    // 数据未就绪时显示加载提示，避免报错
    if (!stocks?.length || !profile?.portfolio) {
        return <div>加载中...</div>;
    }

    const getStockPrice = (id) => {
        // 直接用find匹配股票对象，替代先找索引再取值的写法
        const matchedStock = stocks.find(item => item.id === id);
        // 找不到对应股票时返回0，防止计算报错
        return matchedStock ? matchedStock.stockPrice : 0;
    }

    return (
        <section>
            <h3>{profile.username}</h3>
            <p>{profile.money}</p>
            <p>Portfolio</p>
            <ul>
                {profile.portfolio.map((ownedStock) => (
                    <li key={ownedStock.stockId}>
                        {ownedStock.stockName} <br/>
                        {ownedStock.quantity} <br/>
                        {/* 补全闭合括号，确保语法正确 */}
                        Current Worth: {parseInt(ownedStock.quantity) * parseInt(getStockPrice(ownedStock.stockId))}
                    </li>
                ))}
            </ul>
        </section>
    )
}

export default MyPortfolio;

关键优化说明 #

• 用find替代findIndex：直接返回匹配的股票对象，逻辑更简洁；
• 增加加载状态判断：避免在数据未加载完成时渲染，减少不必要的错误；
• 处理边界情况：找不到对应股票时返回默认值0，防止因数据不匹配导致页面崩溃；
• 修正字段名和语法错误：解决导致匹配失败的根本问题。

内容的提问来源于stack exchange，提问作者tmeng