react的useState案例

hook的使用

    useState处理之后数据返回的是一个数组
    数组的第一个元素就是定义数据
    数组的第二个元素就是操作数据的函数
 

import { useState } from "react"
function App() {
    const phoneData = [
        {
            id: 1,
            phone: '华为手机',
            price: 2000,
            num: 1
        },
        {
            id: 2,
            phone: '锤子手机',
            price: 3000,
            num: 1
        },
        {
            id: 3,
            phone: '小米手机',
            price: 1000,
            num: 1
        }
    ]
    // 数组的第一个元素就是定义数据
    // 数组的第二个元素就是操作数据的函数
    const [goodsData, setStates] = useState([])//useState处理之后数据返回的是一个数组
    function adds(pros) {
        let newCar = [...goodsData]//把购物车里的数据展开并赋值给这个变量
        let index = newCar.findIndex(item => item.id == pros.id)//查找当前所点击的元素和展开的购物车做对比，是否有id
        if (index == -1) {//如果查找不到返回-1就往购物车里面添加所点击的行