React与Material-UI报错：TypeError读取line_items属性失败 如何修复？

这个错误的核心是：你尝试读取line_items时，它的上层对象（checkoutToken或checkoutToken.live）是undefined，大概率是组件初始化时数据还未加载完成，或者接口返回的数据结构不符合预期。

以下是几种可行的修复方案：

方案1：使用可选链操作符（ES2020+） #

在链式访问属性时添加?.，自动处理中间层为undefined的情况：

import React from 'react';
import { Typography, List, ListItem, ListItemText } from '@material-ui/core';

const Review = ({ checkoutToken }) => (
  <>
    <Typography variant="h6" gutterBottom>Order summary</Typography>
    <List disablePadding>
      {checkoutToken?.live?.line_items?.map((product) => (
        <ListItem style={{ padding: '10px 0' }} key={product.name}>
          <ListItemText primary={product.name} secondary={`Quantity: ${product.quantity}`} />
          <Typography variant="body2">{product.line_total?.formatted_with_symbol}</Typography>
        </ListItem>
      ))}
      <ListItem style={{ padding: '10px 0' }}>
        <ListItemText primary="Total" />
        <Typography variant="subtitle1" style={{ fontWeight: 700 }}>
          {checkoutToken?.live?.subtotal?.formatted_with_symbol}
        </Typography>
      </ListItem>
    </List>
  </>
);

export default Review;

方案2：添加条件渲染，确保数据存在再渲染 #

如果需要在数据未加载时显示加载状态，可增加判断逻辑：

import React from 'react';
import { Typography, List, ListItem, ListItemText } from '@material-ui/core';

const Review = ({ checkoutToken }) => {
  if (!checkoutToken?.live) {
    return <Typography variant="body1">Loading order summary...</Typography>;
  }

  return (
    <>
      <Typography variant="h6" gutterBottom>Order summary</Typography>
      <List disablePadding>
        {checkoutToken.live.line_items.map((product) => (
          <ListItem style={{ padding: '10px 0' }} key={product.name}>
            <ListItemText primary={product.name} secondary={`Quantity: ${product.quantity}`} />
            <Typography variant="body2">{product.line_total.formatted_with_symbol}</Typography>
          </ListItem>
        ))}
        <ListItem style={{ padding: '10px 0' }}>
          <ListItemText primary="Total" />
          <Typography variant="subtitle1" style={{ fontWeight: 700 }}>
            {checkoutToken.live.subtotal.formatted_with_symbol}
          </Typography>
        </ListItem>
      </List>
    </>
  );
};

export default Review;

方案3：给Props设置默认值 #

为checkoutToken设置默认结构，避免组件接收空值时报错：

import React from 'react';
import { Typography, List, ListItem, ListItemText } from '@material-ui/core';

const Review = ({ checkoutToken = { live: { line_items: [], subtotal: {} } } }) => (
  <>
    <Typography variant="h6" gutterBottom>Order summary</Typography>
    <List disablePadding>
      {checkoutToken.live.line_items.map((product) => (
        <ListItem style={{ padding: '10px 0' }} key={product.name}>
          <ListItemText primary={product.name} secondary={`Quantity: ${product.quantity}`} />
          <Typography variant="body2">{product.line_total?.formatted_with_symbol || ''}</Typography>
        </ListItem>
      ))}
      <ListItem style={{ padding: '10px 0' }}>
        <ListItemText primary="Total" />
        <Typography variant="subtitle1" style={{ fontWeight: 700 }}>
          {checkoutToken.live.subtotal?.formatted_with_symbol || ''}
        </Typography>
      </ListItem>
    </List>
  </>
);

export default Review;

额外检查点 #

• 确认父组件是否在checkoutToken数据加载完成后，再渲染Review组件
• 核对接口返回的checkoutToken数据结构，确保live、line_items、subtotal字段确实存在

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