react购物车hooks写法

import { useState } from "react";

export default function Bbb (){
    //创建数据，其中setGoods是修改数据的方法
    const [goods,setGoods] = useState([
        {
            name:"羊肉串",
            price:10,
        },
        {
            name:"牛肉串",
            price:20,
        },
        {
            name:"鸡翅",
            price:5,
        },
    ])

    // 创建一个全选状态，并给他的设置默认值false 其中setQx为修改数据的方法
    const [qx,setQx]= useState(false)


    // 声明一个名为quanxuan的方法 
    const  quanxuan = ()=>{
        // 因为全选按钮现在是一个受控组件，直接操作是没有用的，我们通过setQx的这个方法给他的默认值一直取反，并设置给input的checked属性，达到可以勾选的效果
        setQx(!qx)

        // 遍历数组，设置每个单选框的状态同步为全选框状态
        goods.forEach((item)=>{
            item.select = !qx
        })
    }


    // 声明一个名为danxuan的方法
    const danxuan = (index)=>{
        // 因为单选按钮现在是一个受控组件，直接操作是没有用的，我们通过goods对象的结构拿到每一个单选框（index