不使用 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 實現的購物車，只能在當前頁使用，不利于代碼復用，并且會隨著 購物車里面優惠券、折扣等邏輯的增加，而變的難以維護；