React应用两处TypeError报错求助：无法读取属性及map调用失败

让我帮你逐一分析并解决这两个导致应用无法运行的TypeError问题：

错误1：TypeError: Cannot read property 'CoinName' of undefined #

问题原因 #

这个错误出现在Spotlight组件中，主要有两个触发场景：

1. 异步数据未加载完成：coinList是通过fetchCoins异步获取的，组件首次渲染时coinList还未被赋值（初始state里没有定义coinList，默认是undefined）。
2. currentFavorite无效：当应用首次访问（firstVisit: true）或者currentFavorite对应的币种在coinList中不存在时，coinList[currentFavorite]会返回undefined。

修复步骤 #

第一步：给AppProvider添加初始默认值

在AppProvider的constructor中，给coinList设置初始空对象，避免初始渲染时为undefined：

constructor(props) {
  super(props);
  this.state = {
    page: "clocks",
    favorites: ["BTC", "LTC", "ETH", "DASH"],
    timeInterval: "days", // 注意：原代码这里的"[this.state.timeInterval]"是笔误，改成有效时间单位
    coinList: {}, // 添加初始空对象
    ...this.savedSettings(),
    // 保留原有方法定义
    setPage: this.setPage,
    addCoin: this.addCoin,
    removeCoin: this.removeCoin,
    isInFavorites: this.isInFavorites,
    confirmFavorites: this.confirmFavorites,
    setCurrentFavorite: this.setCurrentFavorite,
    setFilteredCoins: this.setFilteredCoins,
    changeChartSelect: this.changeChartSelect
  };
}

第二步：在组件中添加空值检查

修改Spotlight组件，确保数据准备好后再渲染内容，否则显示加载状态：

import React from "react";
import styled from "styled-components";
import { Tile } from "../Shared/Tile";
import { AppContext } from "../App/AppProvider";
import CoinImage from "../Shared/CoinImage";

export default function() {
  return (
    <AppContext.Consumer>
      {({ currentFavorite, coinList }) => {
        // 检查必要数据是否存在
        if (!coinList || !currentFavorite || !coinList[currentFavorite]) {
          return <Tile>Loading...</Tile>; // 也可以返回null或者自定义加载组件
        }
        
        return (
          <Tile>
            <SpotlightName>
              {coinList[currentFavorite].CoinName}
            </SpotlightName>
            <CoinImage spotlight coin={coinList[currentFavorite]} />
          </Tile>
        );
      }}
    </AppContext.Consumer>
  );
}

错误2：TypeError: Cannot read property 'map' of undefined #

问题原因 #

这个错误出现在价格列表组件中，因为prices在初始state中没有定义，首次渲染时为undefined；另外在confirmFavorites方法中会将prices设为null，这两种情况都会导致map无法执行。

修复步骤 #

方案一：组件内安全处理数据

修改价格列表组件，使用空值合并运算符确保prices始终是数组：

import React from "react";
import styled from "styled-components";
import { AppContext } from "../App/AppProvider";
import PriceTile from "./PriceTile";

export default function() {
  return (
    <AppContext.Consumer>
      {({ prices }) => (
        <PriceGrid>
          {/* 使用空值合并，将undefined/null转为空数组 */}
          {(prices ?? []).map((price, index) => (
            <PriceTile key={`priceTile-${index}`} index={index} price={price} />
          ))}
        </PriceGrid>
      )}
    </AppContext.Consumer>
  );
}

方案二：给AppProvider添加初始默认值（可选，推荐配合方案一使用）

在AppProvider的constructor中，给prices设置初始空数组：

constructor(props) {
  super(props);
  this.state = {
    page: "clocks",
    favorites: ["BTC", "LTC", "ETH", "DASH"],
    timeInterval: "days",
    coinList: {},
    prices: [], // 添加初始空数组
    ...this.savedSettings(),
    // 保留原有方法定义
  };
}

额外注意：原AppProvider中timeInterval的初始值是"[this.state.timeInterval]"，这是明显的笔误，必须改成有效的时间单位（比如"days"、"hours"），否则会导致fetchHistorical方法中的moment调用出错，进而影响后续的数据加载。

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