React组件报错Uncaught TypeError: items未定义，饮品列表无法渲染

以下是针对你遇到问题的核心排查方向和解决办法：

1. 处理items的空值/未定义情况 #

即使你确认定义了items，父组件异步加载数据时，初始渲染阶段items大概率是undefined或null，直接调用map就会触发TypeError。

解决办法：

• 给组件的items props设置默认空数组：

  const Drinks = ({ items = [] }) => { ... }
  

• 或者在渲染前做空值判断：

  {items?.map((item) => { ... })}
  

2. 避免desc字段的类型错误 #

代码中对desc调用了split("\n")，如果某条数据的desc是undefined、null或者非字符串类型，会直接抛出TypeError。

解决办法：
先判断desc的有效性再处理：

<p className="item-text">
  {typeof desc === 'string' ? desc.split("\n").map((line, index) => (
    <React.Fragment key={index}>
      {line}
      <br />
    </React.Fragment>
  )) : ''}
</p>

3. 确保item字段的完整性 #

如果数据中存在缺少id、title、img等字段的情况，解构或渲染时会出现异常。

解决办法：
解构时给字段设置默认值，避免报错：

const { id = Math.random().toString(), title = '无标题', img = '', desc = '' } = item;

4. 验证父组件的props传递 #

检查父组件传递给Drinks的props名称是否为items，有没有拼写错误（比如写成item）。可以在组件内打印日志确认：

const Drinks = ({ items = [] }) => {
  console.log('接收到的items:', items); // 确认数据是否正确传递
  // ...其余代码
}

修改后的完整示例代码 #

import React from "react";

const Drinks = ({ items = [] }) => {
  return (
    <div className="section-center">
      {items.map((item) => {
        const { id = Math.random().toString(), title = '无标题', img = '', desc = '' } = item;
        
        return (
          <article key={id} className="drinks-item">
            <img src={img} alt={title} className="photo" />
            <div className="drinks-info">
              <header>
                <h5>{title}</h5>
              </header>
              <p className="item-text">
                {typeof desc === 'string' ? desc.split("\n").map((line, index) => (
                  <React.Fragment key={index}>
                    {line}
                    <br />
                  </React.Fragment>
                )) : ''}
              </p>
            </div>
          </article>
        );
      })}
    </div>
  );
};

export default Drinks;

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