未捕获的类型错误：项目未定义。饮料项目没有出现

Question

我正在尝试为我的饮料部分创建一个单独的 div，但它似乎不是人口，我得到了一个未捕获的 TypeError。我确定我已经定义了项目，所以我不确定发生了什么。

import React from "react";

const Drinks = ({ items }) => {
  return (
    <div className="section-center">
      {items.map((item) => {
        const { id, 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">
                {desc.split("\n").map((item, index) => (
                  <React.Fragment key={index}>
                    {item}
                    <br />
                  </React.Fragment>
                ))}
              </p>
              </div>
          </article>
          
        );
      })}
    </div>
  );
};

export default Drinks;

我在这上面花了好几个小时，但无济于事。如果有人可以帮助我，将不胜感激。

Answer 1

您看到的错误可能是由于项未定义或为空引起的。为避免这种情况，您可以在使用它来呈现饮料列表之前添加项目检查。您可以按如下方式修改您的 Drinks 组件：

import React from "react";

const Drinks = ({ items }) => {
  if (!items) {
    return <div>Loading...</div>;
  }

  return (
    <div className="section-center">
      {items.map((item) => {
        const { id, 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">
                {desc.split("\n").map((item, index) => (
                  <React.Fragment key={index}>
                    {item}
                    <br />
                  </React.Fragment>
                ))}
              </p>
            </div>
          </article>
        );
      })}
    </div>
  );
};

export default Drinks;

如果项目未定义或为空，这将呈现“正在加载...”消息。您还可以自定义此消息以满足您的需求。

如果 items 不是问题，那么问题可能出在您的数据结构或您如何将 items 属性传递给 Drinks 组件。了解您如何渲染 Drinks 组件以及如何传递 items 属性会很有帮助。

Answer 2

计算<< (8 * 4 * 2 + 6) / 2 + 6

Answer 3

@iva的回答很好。如果你想始终呈现“section-center”div，这里有一个替代方案：

（检查项目是否存在且长度 > 0）

import React from 'react';

const Drinks = ({ items }) => {
  return (
    <div className="section-center">
      {items?.length ? (
        items.map(item => {
          const { id, 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">
                  {desc.split('\n').map((item, index) => (
                    <React.Fragment key={index}>
                      {item}
                      <br />
                    </React.Fragment>
                  ))}
                </p>
              </div>
            </article>
          );
        })
      ) : (
        <h1> No items to display </h1>
      )}
    </div>
  );
};

export default Drinks;