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