REACT JS - TypeError：无法读取未定义的属性（读取“名称”）

Question

我网站上未经身份验证的用户应该无法执行删除 function。 当我尝试以未经身份验证的用户身份执行删除 function 时，我收到“TypeError: Cannot read properties of undefined (reading 'name')”。 我该如何解决这个错误？ 删除 function 对于经过身份验证的用户可以正常工作。

这是错误的屏幕截图

产品列表.js

import React from 'react';
import { withRouter } from 'react-router';
import { ButtonFooter, CardContent} from '../components';

function ProductList({
  handleDeleteProduct,
  handleSelectProduct,
  products,
  history,
  errorMessage,
}) {
  function selectProduct(e) {
    const product = getSelectedProduct(e);
    handleSelectProduct(product);
    history.push(`/products/${product.id}`);
  }

  function deleteProduct(e) {
    const product = getSelectedProduct(e);
    handleDeleteProduct(product);
  }

  function getSelectedProduct(e) {
    const index = +e.currentTarget.dataset.index;
    return products[index];
  }

  return (
    <div>
      {errorMessage && <div>{errorMessage}</div>}
      {(!products || !products.length) && !errorMessage && (
        <div>No recipes to show currently...</div>
      )}
      <ul className="list">
        {products.map((product, index) => (
          <li key={product.id} role="presentation">
            <div className="card">
              <CardContent
                name={product.name}
                description={product.description}
                image={product.image}

              />
              <footer className="card-footer">
                <ButtonFooter
                  className="delete-item"
                  iconClasses="fas fa-trash"
                  onClick={deleteProduct}
                  label="Delete"
                  dataIndex={index}
                  dataId={product.id}
                />
                <ButtonFooter
                  className="edit-item"
                  iconClasses="fas fa-edit"
                  onClick={selectProduct}
                  label="Edit"
                  dataIndex={index}
                  dataId={product.id}
                />
                Posted By: {}
              </footer>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default withRouter(ProductList);

Answer 1

试试这个代码。 产品可能一开始还没有准备好将是未定义的

product?.name