如何在反應中使用 UseState 鈎子中的數組以及如何動態更新它

Question

我有這個功能組件。

 import React,{useState} from "react"; import {Container,Row,Col} from "reactstrap"; import "../stylesheets/cart.css"; const Cart = ({image}) => { const [cartList,addItem] =useState([]) if(image !== undefined) { return( <Container> <Row key={image.id}> <Col xs="6"> <img src={image.path} alt={image.name} className="img-thumbnail" /> </Col> <Col xs="6" className="carttest"> <h3>{image.name}</h3> <h4>{image.price}</h4> </Col> </Row> </Container> ); }

我希望每次調用此方法時，都需要將傳入的圖像對象添加到數組的末尾。 如果我總結一下，我想創建的是一個本地狀態的對象數組。 稍后我可以用它來實現filter()和map()函數。

每次調用 Cart 方法時，我都想使用addItem函數在cartList數組的末尾添加圖像對象。

誰能給我一個解決方案

Answer 1

這樣做的解決方案很簡單，但Cart不是一種方法，它是一個反應組件。 如果我理解您的問題，您希望在該道具更新時將image添加到本地狀態。 您可以使用useEffect鈎子來處理此問題。

1. 在依賴數組中使用useEffect和image來觸發效果回調。
2. 使用功能狀態更新來淺復制現有的cartList數組並將新圖像附加到數組的末尾。

大車

const Cart = ({ image }) => {
  const [cartList, addItem] = useState([]);

  useEffect(() => {
    image && addItem(cart => [...cart, image]); // <-- functional state update
  }, [image]); // <-- image dependency

  ...
};