React 第三十节 使用 useState 和 useEffect Hook实现购物车

不使用 redux 实现 购物车案例

使用 React 自带的 useState 和 useEffect Hook 即可实现购物车

export default function ShoppingCar() {// 要结算的商品 总数 以及总价const [totalNum, setTotalNum] = useState(0)const [totalPerice, setTotalPerice] = useState(0)// 商品列表 初始化一个mock 数据const [list, setList] = useState(orderLists)...
}

1、新增商品

使用 setList() 进数据状态更新

// 模拟新增商品
const handleAdd = () => {const curList = [...list]console.log('===curList=', curList)curList.unshift({name: `商品${list.length + 1}`,id: `sss_${list.length + 1}` ,num: 1,price: 12.00,totalPrice: 12.00, })setList([...curList])
}

2、修改商品的数量

const handleChangeNum = (type, id) => {const curList = [...list]if(type === 'ADD') {curList.map(itm => {if (itm.id === id) {itm.num = itm.num + 1itm.totalPrice = itm.num * itm.price}})} else{curList.map(itm => {if (itm.id === id) {itm.num = itm.num !== 0  ? itm.num - 1 : 0itm.totalPrice = itm.num * itm.price}})}setList([...curList])
}

3、选择要结算的商品

const handleChangeCheckbox = (e, id) =>{console.log('---', e.target.value)const curList = [...list]curList.map(itm => {if (itm.id === id) {itm.isChecked = !itm.isChecked}})setList([...curList])
}

4、计算要结算商品的 总数 及 总价

使用 useEffect() 监测 商品列表的变化

useEffect(() => {let isSelectedLists = []list.map(itm => {if (itm.isChecked) {isSelectedLists.push(itm)}})console.log('=isSelectedLists==', isSelectedLists)const curNum = isSelectedLists && isSelectedLists.length &&isSelectedLists.reduce((total, item) => total + item.num, 0) || 0const curTotal = isSelectedLists && isSelectedLists.length && isSelectedLists.reduce((total, item) => total + item.totalPrice, 0) || 0console.log('==curNum==', curNum)console.log('==curTotal==', curTotal)setTotalNum(curNum)setTotalPerice(curTotal)
}, [list]

5、完整代码案例

// index.jsx 
import React, {useState, useEffect, useId} from 'react'
import './index.scss'
import { orderLists } from './mock.js'
export default function ShoppingCar() {// const id = useId()const [totalNum, setTotalNum] = useState(0)const [totalPerice, setTotalPerice] = useState(0)const [list, setList] = useState(orderLists)const handleChangeNum = (type, id) => {const curList = [...list]if(type === 'ADD') {curList.map(itm => {if (itm.id === id) {itm.num = itm.num + 1itm.totalPrice = itm.num * itm.price}})} else{curList.map(itm => {if (itm.id === id) {itm.num = itm.num !== 0  ? itm.num - 1 : 0itm.totalPrice = itm.num * itm.price}})}setList([...curList])}const handleChangeCheckbox = (e, id) =>{console.log('---', e.target.value)const curList = [...list]curList.map(itm => {if (itm.id === id) {itm.isChecked = !itm.isChecked}})setList([...curList])}const handleAdd = () => {const curList = [...list]console.log('===curList=', curList)curList.unshift({name: `商品${list.length + 1}`,id: `sss_${list.length + 1}` ,num: 1,price: 12.00,totalPrice: 12.00, })setList([...curList])}useEffect(() => {let isSelectedLists = []list.map(itm => {if (itm.isChecked) {isSelectedLists.push(itm)}})console.log('=isSelectedLists==', isSelectedLists)const curNum = isSelectedLists && isSelectedLists.length &&isSelectedLists.reduce((total, item) => total + item.num, 0) || 0const curTotal = isSelectedLists && isSelectedLists.length && isSelectedLists.reduce((total, item) => total + item.totalPrice, 0) || 0console.log('==curNum==', curNum)console.log('==curTotal==', curTotal)setTotalNum(curNum)setTotalPerice(curTotal)}, [list])return (<div className='list'>{list.map(itm => {return (<div className="li" key={itm.id}><div className='commodity'><input type="checkbox" name="" id="" value={itm.isChecked} onClick={(e) => handleChangeCheckbox(e, itm.id)}/><span>{itm.name}</span></div><div className="price">单价：{itm.price}</div><div className='num'><span className='handle-icon' onClick={() => handleChangeNum('ADD', itm.id)}>+</span><span className='itm-num'>{itm.num}</span><span  className='handle-icon' onClick={() => handleChangeNum('REDUCE', itm.id)}>-</span></div><div className='total'>总价：{itm.totalPrice}</div></div>)})}<div className='total'><span className='total-num'>共计：{totalNum}件</span><span className='total-price'>合计：{totalPerice}元</span></div><button className="btn" onClick={handleAdd}>增加商品</button></div>)
}

// index.scss 文件
.li{width: 100%;height: auto;display: flex;align-items: left;justify-content: left;
}
.commodity{width: 100%;height: 46px;display: flex;align-items: center;justify-content: left;&>span{display: inline-block;min-width: 100px;margin-left: 6px;margin-right: 6px;}}
.price{display: inline-block;margin-left: 6px;margin-right: 6px;min-width: 90px;
}
.num{width: 100%;height: 36px;display: flex;align-items: center;cursor: pointer;
}
.handle-icon{display: inline-block;width: 36px;height: 36px;cursor: pointer;line-height: 36px;border: 1px solid #efefef;
}
.itm-num{display: inline-block;padding: 2px 8px;
}
.total{min-width: 100px;color: #ff0000;
}
.total-price{margin-left: 20px;
}
.btn{}

6、注意事项

a、使用useState 的setXXX() 函数进行修改 对象类型时候，需要修改其指针和值，如果不修改指向，不会触发视图更新；
b、列表中每一项需要有唯一性的key，这样才会触发唯一性进行数据更新；
c、使用useState 和 useEffect 实现的购物车，只能在当前页使用，不利于代码复用，并且会随着 购物车里面优惠券、折扣等逻辑的增加，而变的难以维护；