如何在React中为JSON中的每一项创建唯一的ID？

Question

我在网上购物，我有这样的问题：

当我向购物车中添加相同的项目时，它们具有相同的id，而当我尝试删除其中的一项时，所有内容都会被删除。

还有一个错误“键应该是唯一的.”

那么，如何为每个项目制作唯一的标识呢？

{purchases.map(p => <ShoppingCartItem key={p.id} body={p.body} removeItem={() => removeItem(p.id)}/>)}

减速机：

        case ADD_ITEM_TO_CART: {
            return {
                ...state,
                shoppingCart:  [...state.shoppingCart, action.phone]
            }
        }

状态：

const initialState = {
   data: phones, // phones - contain all data from JSON
   shoppingCart: []
};

JSON有这样的结构：

{   
        "id": "iPhone-11",
        "body": {
            "section": "phone",
            "model": "iPhone 11",
            "price": "399",
            "description": []
}

状态：

​

Answer 1

您可以使用索引作为键。但不要将其用作整数，而应用作字符串。

{purchases.map((p, index) => <ShoppingCartItem key={index.toString()} body={p.body} removeItem={() => removeItem(p.id)}/>)}

如果要在应用程序中全局使用ID (例如，将其保存在DB中)，我建议采用这种方法。除此之外，您还可以尝试使用这个套餐。

正如我从您的问题编辑中看到的，您正在将JSON的内容直接添加到购物车中。在添加内容之前，您应该修改它的ID，或者添加一些只用于该目的的额外ID属性。要做到这一点，您可以这样做：

// Set this counter on the top of the reducer file or in some other file
const TEMPORARY_ID = 0; 

case ADD_ITEM_TO_CART: {
  return {
    ...state,
    shoppingCart:  [
      ...state.shoppingCart, 
      {
        ...action.phone,
        id: `${action.phone.id}-${TEMPORARY_ID++}` //instead of this, I use small library 'shortid'
      }

    ]
  }
}

Answer 2

似乎有来自id数组的重复条目。

您可以修复源(可能来自后端)以确保id是唯一的，也可以通过确保键是唯一的在前端修复它。

虽然可以将数组的索引用作key，但我不建议您只依赖它。

一个更安全的方法是将每个数组的索引附加到id中。

{purchases.map((p, index) => <ShoppingCartItem key={`${p.id}${index}`} body={p.body} removeItem={() => removeItem(p.id)}/>)}

对于removeItem方法，我猜您需要编辑逻辑，以便当存在相同类型/id的多个项时，它将处理项的删除。

第二个问题-从废品中删除物品。

如果可以，redux存储可以由同一个id的多个对象组成，通过引用id (例如使用Array.filter())来删除单个对象将无法工作，因为它将简单地使用该id删除所有对象。

在不对数据结构进行剧烈更改的情况下，最简单的方法是通过对象的索引删除对象。但是，这是假设在将数组/状态显示在前端之前，您没有对数组/状态进行任何其他修改(例如排序)。

首先，您可以将索引传递给removeItem方法处理程序，而不是传递id。

{purchases.map((p, index) => <ShoppingCartItem key={`${p.id}${index}`} body={p.body} removeItem={() => removeItem(index)}/>)

然后，在减速机上。

case REMOVE_ITEM_FROM_CARD: {
  return {
    ...state,
    shoppingCart: state.shoppingCart.filter((item, index) => index !== action.index
  }
}