使用 useState 钩子在对象数组中修改和插入新对象答案

【问题标题】：modify and insert new object in array of objects with useState hook使用 useState 钩子在对象数组中修改和插入新对象
【发布时间】：2021-06-11 08:21:01
【问题描述】：

我正在使用 React hooks 开发一个简单的订单列表 web 应用程序，我有一个orders 状态，当用户点击购物面板中的产品图片时，一个新对象会添加到具有数量属性的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，我想更新数量属性

否则，我想在订单数组中添加一个新对象

我知道这有点简单，但我是 React.js 的新手，尤其是 React 钩子

我已经搜索过，但答案让我有点困惑！

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

当您需要更新项目时，使用对象（字典）而不是数组更容易。

将order更改为对象，检查对象上是否存在product._id。如果没有，则使用product._id 作为键将项目添加到对象。如果是，则在product._id 处重新创建对象，并增加之前的数量。

当您希望渲染对象时，使用Object.values() 将对象转换为数组。

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
}

【讨论】：

【解决方案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]);
  }
};

【讨论】：

【解决方案3】：

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

【讨论】：