React函数组件实现K线图时useEffect未生效导致读取date属性报错

问题根因 #

报错和useEffect的使用逻辑无关，问题出在初始渲染阶段的空数组访问：

• 你给prices的初始值是空数组，useEffect里的接口请求是异步执行的，会晚于组件的第一次渲染
• 第一次渲染时直接执行了const end = xAccessor(prices[prices.length - 1])，空数组的prices.length - 1值为-1，prices[-1]返回undefined，传入xAccessor访问date属性就触发了TypeError

修复方案 #

1. 加数据加载判断，数据就绪前不渲染K线组件 #

在return语句前增加长度校验，空数据时渲染加载提示：

// 如果你确定需要至少49条K线才能正常渲染，判断条件可以改为 prices.length < 49
if (prices.length < 1) {
  return <div>K线数据加载中...</div>
}

2. 可选优化：增加接口异常捕获 #

给getPrices请求加catch分支，避免接口报错时页面一直停留在加载态：

useEffect(() => {
  getPrices(props.coin.coin)
    .then((data: ohlcv[]) => {
      // 原有转换、赋值逻辑不变
      const transformedPrices: chartOhlcv[] = data
        .map((singleOhlcv) => ({
          date: new Date(singleOhlcv.closeTime * 1000),
          open: singleOhlcv.open,
          high: singleOhlcv.high,
          low: singleOhlcv.low,
          close: singleOhlcv.close,
          volume: singleOhlcv.volume,
        }))
        .sort((p1, p2) => (p1.date < p2.date ? -1 : 1));
      setPrices(transformedPrices);
    })
    .catch(err => {
      console.error('K线数据请求失败：', err)
      // 可以在这里加错误提示的状态控制
    })
}, [props.coin])

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