类型错误：无法解构“项目”的属性“名称”，因为它未定义

IT技术 javascript reactjs redux react-redux
2021-05-15 14:36:58

** 我无法弄清楚这里的问题。任何人都可以帮我 ** 当我将项目作为props传递时，我得到了类型错误：无法解构“项目”的属性“名称”，因为它是未定义的。

产品页面.js

...

const ProductsPage = ({ products, currentUser }) => {
  ..... 
  // note: products is an array with objects of product each product has id, name, image and price

  return (
    <div className="products-page">
      ....
      ..
      <div className="products-page__content">
        {filteredProducts.map((item) => ( // I try to console.log(item) and I get whole object
          <Product key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
};

........

产品.js

function Product({ item, addItem }) {
  const { name, price, image } = item;

  return (
    <article className="product">
      <Link to="/products/" className="product__searchbox">
        <BiSearch className="product__search-icon" />
      </Link>
      <img src={image} alt={name} className="product__img" />
      <div className="product__footer">
        <h4 className="product__title">{name}</h4>
        <span className="product__price">
          {new Intl.NumberFormat("de-DE", {
            style: "currency",
            currency: "EUR",
          }).format(price)}
        </span>
      </div>
      <CustomButton inverted onClick={() => addItem(item)}>
        Add to Cart
      </CustomButton>
    </article>
  );
}

....

3个回答

这是从父级传递数据的常见问题。为您的项目提供默认值：

function Product({ item, addItem }) {
  const { name, price, image } = item || {};

  ....

项目未定义，它不在提供给 Product() 的对象中。因此，当您尝试从 item 中获取名称时，js 会窒息并给出该错误。

试试这个代码：

const myCoolThing = {foo: {cats: 11};
const { foo } = myCoolThing;
const { cats } = foo;
console.log(cats);

const { bar } = myCoolThing;
const { dogs } = bar; // Look! It's your error.
console.log(dogs);

在您的情况下，您正在迭代过滤产品列表。很可能列表中的至少一个元素是undefined。过滤过程可能是将索引设置为 undefined 而不是拼接数组以删除索引。

这是从父级传递数据的常见问题。为您的项目提供默认值：

function Product({ item, addItem }) { const { name, price, image } = item || {}; 这对我有用

其它你可能感兴趣的问题
上一篇Nginx、React、Node 和让我们加密……如何将 Nginx 指向我的 React 应用程序 下一篇添加灯丝传感器