一个空的useState数组是如何与数据匹配的

Question

每个人。cartItems的初始值是一个空数组[]。当我们在onAdd上添加product时，当它为空时，它如何与cartItems匹配。

import React, { useState } from 'react'
import Header from "./components/Header"
import Main from "./components/Main"
import Basket from "./components/Basket"
import data from "./data"
import styles from "./index.css"
function App() {
const {products} =data
const [cartItems, setCartItems] = useState([]);
const onAdd = (product) => {
const exist = cartItems.find((x) => x.id === product.id);
if (exist) {
setCartItems(
cartItems.map((x) =>
x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
)
);
} else {
setCartItems([...cartItems, { ...product, qty: 1 }]);
}
};
return (<div>
<div>
<Header/>
<div className="header2" >
<Main ff={products} onAdd={onAdd} />
<Basket onAdd={onAdd}  cartItems={cartItems}/>
</div>
</div>
</div>
)
}

Answer 1

在ADD函数中，首先检查项是否存在。如果项目存在，则表示数量值增加了一
表达式

setCartItems(
cartItems.map((x) =>
x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
)
);

IS相当于

const addingExsitingValue = (value,index,cartArray) => {
if(value.id===product.id){
cartArray[index] = {...product, qty: product.qty + 1 } // here's a mistake you made, the exist is simple true or false, it should be product
}
}
cartItems.forEach(addingExisitingValue);

以及setCartItems([...cartItems, { ...product, qty: 1 }]);只是将新产品添加到cartItems中，这相当于

cartItem.push({...product,qty:1})

我希望现在我能理解你