分享技术 react 子组件与父组件通信

import React,{useState,useContext} from "react";
import "./styles.css";
const MyContext = React.createContext()

const Item = (props) => {
    const { update } = useContext(MyContext)
    let add=()=>{
      props.item.count+=1;
      update(props.item);
    }
    let sub=()=>{
      props.item.count-=1;
      if(props.item.count<0){
        props.item.count=0;
      }
      update(props.item);
    }
    return (
        <div>
          {props.item.title} x {props.item.count}
          <button onClick={add}>+</button>
          <button onClick={sub}>-</button>
        </div>
	)
}

const App = () => {
    const [list, setList] = useState([
      {
        title:'摩卡',
        count:2
      },
      {
        title:'美式',
        count:1
      }
    ])
    function update(item) {
      console.log(item)
      let newlist=[];
      list.map((i)=>{
        if(i==item){
          newlist.push(item);
        }else{
          newlist.push(i);
        }
      })
      setList(newlist)
    }
    
    return (
	    <MyContext.Provider value={{update}}>
    		{
        list.map((item,i)=>{
          return(
            <Item key={i} item={item} />
          )
        })
        }
    	</MyContext.Provider>
	)
}
export default App

https://codesandbox.io/s/demo-059-kgocr?file=/src/App.js