Question

我正在创建一个带有如下所示反应钩的购物车

const ShoppingCart = () => {
    const [products, setProducts] = useState([
        {id: 1, name: 'Product 1', price: 2500},
        {id: 2, name: 'Product 2', price: 2000},
        {id: 3, name: 'Product 3', price: 2500},
    ])

    const [cart, setCart] = useState()


    const addToCart = (item) => (
        setCart([cart, {item}])
        // setCart([...cart, {item}])
        // setCart([{item}])
    )

    return (
              {
                    products.map((product, i) => (
                        <>
                        <Product name={product.name} price={product.price} key={product.id} />
                        <button 
                            value='Add to cart' 
                            // onClick={((product) => setCart(...cart, product))}
                            onClick={(product) => addToCart(product)}
                            // onClick={console.log(i)}
                            />
                            {console.log(cart)}
                        </>
                    ))
                }
    )
}

注释掉的行是我尝试过的一些行不通的事情。还尝试了在map的lamda函数中不使用第二个arg [i]的情况。

在用户单击按钮

后，我试图将产品添加到购物车对象

例如，如果用户单击ID为1的产品旁边的按钮，则购物车的预期状态为

[{id: 1, name:'Product 1', price: 2500}]

如果可能的话，我还想向对象添加另一个字段，金额为

Answer 1

设置购物车的初始值

const [cart, setCart] = useState([]); // [] is the initial value of the cart

从传递给product的回调中删除onClick，因为它不是产品，而是click event

<button value="Add to cart" onClick={() => addToCart(product)} />

并且传播算子应该工作正常

const addToCart = item => {
    setCart([...cart, item]);
};

编辑

如果您只想添加一次，请首先检查它是否在购物车中：

const addToCart = item => {
  const ndx = cart.findIndex(e => e.id === item.id);
  if (ndx === -1) {
    setCart([...cart, item]);
  }
};

Answer 2

请在addToCart函数中使用... cart，因为cart是先前的数据数组，当您喜欢[... cart，item]时，Previous数组将合并到新数组中，并在其中添加新产品对象新数组。

+---------+---------+-------------+----------------------------+-------------------+
| lead_id | version | lead_typeID |         Lead Type          |   Employee Name   |
+---------+---------+-------------+----------------------------+-------------------+
| 3576109 |       1 |        2552 | Online Inquiry             | Call Center - Joe |
| 3576109 |       2 |        2552 | Online Inquiry             | George            |
| 3576109 |       3 |        2552 | Online Inquiry             | Lisa              |
| 3576109 |       4 |        2552 | Online Inquiry             | Call Center - Bob |
| 3576109 |       5 |        2552 | Online Inquiry             | John              |
| 3576109 |       6 |        2552 | Online Inquiry             | George            |
| 3576109 |       7 |        2552 | Online Inquiry             | George            |
| 3576109 |       8 |        2552 | Online Inquiry             | John              |
| 3576114 |       1 |        2553 | Online Reservation         | Call Center - Joe |
| 3576114 |       2 |        2553 | Online Reservation         | Call Center - Bob |
| 3576142 |       1 |        4866 | Sales Center - Reservation | John              |
| 3576142 |       2 |        4866 | Sales Center - Reservation | Call Center - Joe |
| 3576160 |       1 |        2553 | Online Reservation         | Lisa              |
| 3576160 |       2 |        2553 | Online Reservation         | Call Center - Joe |
| 3576160 |       3 |        2553 | Online Reservation         | George            |
| 3576160 |       4 |        2553 | Online Reservation         | Lisa              |
| 3576164 |       1 |        4865 | Sales Center - Inquiry     | Call Center - Bob |
| 3576164 |       2 |        4865 | Sales Center - Inquiry     | John              |
| 3576164 |       3 |        4865 | Sales Center - Inquiry     | George            |
| 3576164 |       4 |        4865 | Sales Center - Inquiry     | George            |
| 3576193 |       1 |        2553 | Online Reservation         | John              |
| 3576193 |       2 |        2553 | Online Reservation         | Call Center - Joe |
| 3576248 |       1 |        2553 | Online Reservation         | Call Center - Bob |
| 3576248 |       2 |        2553 | Online Reservation         | John              |
| 3576261 |       1 |        2552 | Online Inquiry             | Call Center - Joe |
| 3576261 |       2 |        2552 | Online Inquiry             | Lisa              |
| 3576261 |       3 |        2552 | Online Inquiry             | Call Center - Joe |
| 3576263 |       1 |        4865 | Sales Center - Inquiry     | George            |
| 3576263 |       2 |        4865 | Sales Center - Inquiry     | Lisa              |
| 3576263 |       3 |        4865 | Sales Center - Inquiry     | Call Center - Bob |
| 3576263 |       4 |        4356 | Site - Reservation         | Call Center - Bob |
| 3576289 |       1 |        4865 | Sales Center - Inquiry     | George            |
| 3576289 |       2 |        4865 | Sales Center - Inquiry     | George            |
| 3576310 |       1 |        4867 | Sales Center - Lost        | John              |
| 3576310 |       2 |        4867 | Sales Center - Lost        | Call Center - Joe |
| 3576310 |       3 |        4867 | Sales Center - Lost        | Call Center - Bob |
+---------+---------+-------------+----------------------------+-------------------+

请不要将参数传递给您的点击回调函数，因为您是从上方获得此产品的，而不是从点击函数获得的。请使用类似这样的匿名函数

 const addToCart = (item) => (
    setCart([...cart,item])
)

Answer 3

使用scores=cross_val_score(clf_RF_Rice,X,Y,cv=5) clf_RF_Rice.fit(X_train,Y_train) clf_RF_Rice.score(X_test,Y_test)

在React中的两个状态之间传输对象

3 个答案: