为什么我会收到这种类型的错误“无法读取未定义的属性（读取‘数量’）”。当我尝试在按钮中使用 onclick() 函数时，它不起作用。我总是显示一条消息“数量未定义，无法读取其属性”。请帮我解决这个问题。我试过所有方法来解决这个问题，但都失败了……

react 的 App.js 文件

import "./App.css";
import Navbar from "./navbar";
import Productlistshow from "./productlistshow";
import { useState } from "react";

function App() {
  const [productList, setproductList] = useState([
    {
      name: "sam1",
      price: 100,
      quantity: 0,
    },
    {
      name: "sam2",
      price: 300,
      quantity: 0,
    },
  ]);
  let incqty = (index) => {
    let product_list = [...productList];
    product_list[index].quantity++
    setproductList(product_list);
  };

 
  return (
    <>
      <Navbar />
      <main>
        <Productlistshow product={productList} incqty={incqty} />
      </main>
    </>
  );
}

export default App;

react 的 productlistshow.js 文件

import { Component } from "react";
import Showproduct from "./showproduct";

class Productlistshow extends Component {
  constructor(props, i) {
    super(props);
  }

  render() {
    return this.props.product.map((product, i) => {
      return (
        <Showproduct pro={product} key={i} index={i} incqty={this.props.incqty} />
      );
    });
  }
}

export default Productlistshow;

react 的 showproduct.js 文件

function Showproduct(props, index) {
  return (
    <>
      <div className="container">
        <div className="row">
          <div className="col-4">
            <h2>{props.pro.name}</h2>
          </div>
          <div className="col-4">
            <h2>Total Price ${props.pro.price}</h2>
          </div>
          <div className="col-4">
            <h2>
              <div
                className="btn-group"
                role="group"
                aria-label="Basic example"
              >
                <button type="button" className="btn btn-primary">
                  -
                </button>
                <button type="button" className="btn btn-primary">
                  {props.pro.quantity}
                </button>
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => {
                    props.incqty(index);
                  }}
                >
                  +
                </button>
              </div>
            </h2>
          </div>
        </div>
      </div>
    </>
  );
}
 
export default Showproduct;

react 的 navbar.js

import React from "react";
import "./navbar.css"

class Navbar extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
          <a className="navbar-brand">
            Navbar
          </a>
      </nav>
    );
  }
}

export default Navbar;

react 的 navbar.css

.navbar-brand
{
    font-size: 2rem;
}