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