useEffect的基本使用2 -useConText的使用

useEffect的基本使用2 -useConText的使用

实现简单购物车数量增减操作

一、工程目录(src)：

二、编写代码：

conText.js

import React from "react"

const cartConText = React.createContext({
    // item: [],
    // count: 0
})


export {
    cartConText
}

Cart.jsx

import React, { useContext, useEffect, useState } from 'react'
import axios from 'axios'
import CartItem from './CartItem'
import {cartConText} from '../conText/conText'

export default function TestA() {
    let [cartList, setCartList] = useState([])
    let [number,setNumber] = useState(0)

    useEffect(() => {
        axios.get('http://localhost:8889/api/cart/list')
            .then(res => {
                setCartList(res.data.result)
                res.data.result.forEach(o =>
                    setNumber(prev => prev +o.goodsNum)
                    ) 
            })
    }, [])

    const add = (item) => {
        // console.log(item);
        item.goodsNum += 1;
        setNumber(prev => prev + 1)
        setCartList([...cartList])
    }

    return (
        <cartConText.Provider value={{add,number}}>
            <div>
            {
                cartList.map(e =>
                    <CartItem key={e.id} item={e} />
                )
            }
            {number}
        </div>
        </cartConText.Provider>
    )
}

CartItem.jsx

import React, { useContext } from 'react'
import {cartConText} from '../conText/conText'

export default function CartItem(props) {
// console.log(props);

const {add} = useContext(cartConText)
  return (
    <div>
      {props.item.goodsName} - {props.item.goodsNum} ---- <button onClick={() => add(props.item)}>+</button> 
    </div>
  )
}

三、运行效果：