使用 useState 鈎子在對象數組中修改並插入新的 object

Question

我正在使用反應鈎子處理一個簡單的訂單列表 web 應用程序，我有一個orders state 並且當用戶單擊購物面板中的產品圖像時，一個新的 object 將屬性orders添加到數組中

export const AddOrder = () => {

const [order, insertOrder] = useState([])

let orderHandler = (e, product) => {
    e.preventDefault()
    console.log('orderHandler')
    let newOrder = {
        _id: product._id,
        quantity: 1,
        sellingPrice: product.sellingPrice
    }
    //insertOrder([...order, newOrder])
    insertOrder(prevState => {
      return(
           [ ...prevState, newOrder ])
      })
}

現在當用戶點擊產品圖片時：

如果產品 ID 存在於訂單數組中，我想更新數量屬性

否則，我想在訂單數組中添加一個新的 object

我知道這有點簡單，但我是 React.js 的新手，尤其是 React 鈎子

我已經搜索過，但答案讓我有點困惑！

Answer 1

當您需要更新項目時，使用 object（字典）而不是數組更容易。

將order更改為 object，檢查 object 上是否存在product._id 。 如果沒有，則使用product._id作為鍵將該項目添加到 object。 如果是，請在product._id處重新創建 object，並增加之前的數量。

當您希望渲染它時，使用Object.values()將 object 轉換為數組。

const AddOrder = () => {
  const [order, updateOrder] = useState({})

  const orderHandler = (e, product) => {
    e.preventDefault()
    
    updateOrder(prevState => {
      if(product._id in prevState) {
        return {
          ...prevState,
          [product._id]: {
            ...prevState[product._id],
            quantity: prevState[product._id].quantity + 1
          }
        }
      }
    
      const newOrder = {
        _id: product._id,
        quantity: 1,
        sellingPrice: product.sellingPrice
      }
      
      return { ...prevState, [product._id]: newOrder }
    })
  }
  
  const orderArr = Object.values(order)
  
  // return - render the orderArr
}

Answer 2

let orderHandler = (e, product) => {
  e.preventDefault();
  let newOrder = {
    _id: product._id,
    quantity: 1,
    sellingPrice: product.sellingPrice,
  };
  // find whether the product already exists
  const isOrderPresent = order.some((item) => item._id === product._id);
  // if found update its quantity 
  if (isOrderPresent) {
    const updatedOrder = order.map((item) => {
      if (item._id === product._id) {
        return {...item, quantity: ++item.quantity};
      }
      return item;
    });
    insertOrder(updatedOrder);
  } else {
    // if not found add the new order along with the existing order
    insertOrder((prevOrderState) => [...prevOrderState, newOrder]);
  }
};

Answer 3

insertOrder(prev => {
  return [...prev, newOrder]
})