千峰React:案例二

完成对html文档还有css的引入，引入一下数据：

import { func } from 'prop-types' import './购物车样式.css' import axios from 'axios' import { useImmer } from 'use-immer' import { useEffect } from 'react' function Item() { return ( <li className='active'> <h3>香蕉</h3> <p>单价：5</p> <p> 数量： <span className='remove'>-</span> <span>1</span> <span className='add'>+</span> </p> <div className='cartbtn'>取消购买</div> </li> ) } function Cart() { const [list, setList] = useImmer([]) useEffect(() => { axios.get('../public/cartData.json').then((res) => { console.log(res) }) }) return ( <div className='cart'> <ul> <Item /> </ul> <div className='all'> 总金额：<span>5</span>元 </div> </div> ) } export default Cart

然后判断数据是否存在：

刚刚数字一直在疯涨，导致他疯涨的原因是我的useEffect没加依赖数组，还有axios的url，如果我的数据文件在public里，可以直接从根目录访问（好像学过），要写成这样👇

useEffect(() => { axios.get('/cartData.json').then((res) => { if (res.data.errcode === 0) { //map来给购物车添加 setList(res.data.list.map((item) => ({...item,active:false}))) } }) },[])

还有一个无语的bug是箭头函数的return每次都会加大括号忘记加retuen，不加return又会格式化到下一行

对每个按钮绑上onClick事件，再给每个按钮绑上id：

import { func } from 'prop-types' import './购物车样式.css' import axios from 'axios' import { useImmer } from 'use-immer' import { useEffect } from 'react' function Item({id,name,price,number,active,handleAdd}) { return ( //active初始根据active的值判定 <li className={ active?'active':''}> <h3>{ name}</h3> <p>单价：{ price}</p> <p> 数量： <span className='remove'>-</span> <span>{ number}</span> <span className='add'>+</span> </p> <div className='cartbtn' onClick={()=>handleAdd(id)}>{ active?'取消购买':'添加购物车'}</div> </li> ) } function Cart() { const [list, setList] = useImmer([]) useEffect(() => { axios.get('/cartData.json').then((res) => { if (res.data.errcode === 0) { //map来给购物车添加 setList(res.data.list.map((item) => ({ ...item, active: false }))) } }) }, []) const handleAdd=(id) => { setList((draft) => { const value = draft.find((item) => item.id === id) value.active=!value.active }) } return ( <div className='cart'> <ul> {list.map((item) => <Item key={item.id} {...item} handleAdd={handleAdd} />)} </ul> <div className='all'> 总金额：<span>5</span>元 </div> </div> ) } export default Cart

增加修改数量的功能

import { func } from 'prop-types' import './购物车样式.css' import axios from 'axios' import { useImmer } from 'use-immer' import { useEffect } from 'react' function Item({ id, name, price, number, active, handleAdd, handleNumberChange, }) { return ( //active初始根据active的值判定 <li className={active ? 'active' : ''}> <h3>{name}</h3> <p>单价：{price}</p> <p> 数量： <span className='remove' onClick={()=>handleNumberChange(id, -1)}> - </span> <span>{number}</span> <span className='add' onClick={()=>handleNumberChange(id, +1)}> + </span> </p> <div className='cartbtn' onClick={() => handleAdd(id)}> {active ? '取消购买' : '添加购物车'} </div> </li> ) } function Cart() { const [list, setList] = useImmer([]) useEffect(() => { axios.get('/cartData.json').then((res) => { if (res.data.errcode === 0) { //map来给购物车添加 setList(res.data.list.map((item) => ({ ...item, active: false }))) } }) }, []) const handleAdd = (id) => { setList((draft) => { const value = draft.find((item) => item.id === id) value.active = !value.active }) } const handleNumberChange = (id, num) => { setList((draft) => { const value = draft.find((item) => item.id === id) if (value.number === 0 && num < 0) { return } value.number += num }) } return ( <div className='cart'> <ul> {list.map((item) => ( <Item key={item.id} {...item} handleAdd={()=>handleAdd(item.id)} handleNumberChange={(num)=>handleNumberChange(item.id,num)}//注意传参问题，前面的num是onClick传递的 /> ))} </ul> <div className='all'> 总金额：<span>5</span>元 </div> </div> ) } export default Cart

如果你写成 handleNumberChange={() => handleNumberChange(item.id, num)}，num 的值无法动态传递，因为 num 是在 Item 组件的 onClick 事件中才确定的。

加入计算总金额功能，用filter选择被加入购物车的商品，reduce计算

const all = list .filter((item) => item.active) .reduce((init, item) => init + item.number * item.price, 0)

每次改变状态时都会重新渲染，提升性能，使用memo，只有props不同的时候才会渲染

里面包的是函数，之前学的useCallback可以解决函数被Object.Is()判别为不同的问题

import { func } from 'prop-types' import './购物车样式.css' import axios from 'axios' import { useImmer } from 'use-immer' import { memo, useCallback, useEffect } from 'react' const Item = memo(function Item({ id, name, price, number, active, handleAdd, handleNumberChange, }) { console.log('如果被渲染了，我就会出现') return ( //active初始根据active的值判定 <li className={active ? 'active' : ''}> <h3>{name}</h3> <p>单价：{price}</p> <p> 数量： <span className='remove' onClick={() => handleNumberChange(id, -1)}> - </span> <span>{number}</span> <span className='add' onClick={() => handleNumberChange(id, +1)}> + </span> </p> <div className='cartbtn' onClick={() => handleAdd(id)}> {active ? '取消购买' : '添加购物车'} </div> </li> ) }) function Cart() { const [list, setList] = useImmer([]) const all = list .filter((item) => item.active) .reduce((init, item) => init + item.number * item.price, 0) useEffect(() => { axios.get('/cartData.json').then((res) => { if (res.data.errcode === 0) { //map来给购物车添加 setList(res.data.list.map((item) => ({ ...item, active: false }))) } }) }, []) const handleAdd = useCallback((id) => { setList((draft) => { const value = draft.find((item) => item.id === id) value.active = !value.active }) }) const handleNumberChange = useCallback((id, num) => { setList((draft) => { const value = draft.find((item) => item.id === id) if (value.number === 0 && num < 0) { return } value.number += num }) }) return ( <div className='cart'> <ul> {list.map((item) => ( <Item key={item.id} {...item} handleAdd={() => handleAdd(item.id)} handleNumberChange={(num) => handleNumberChange(item.id, num)} //注意传参问题，前面的num是onClick传递的 /> ))} </ul> <div className='all'> 总金额：<span>{all}</span>元 </div> </div> ) } export default Cart

这下基本就写完了