如何给一个新的 REDUIX 项目一个唯一的 ID？ [复制]

Question

我正在将带有 props 的数据数组映射到一个组件中。然后 onClick 我将一些数据从渲染的项目中提取到 redux/reducer 中，尝试渲染相同的数据 - 但在页面上的不同位置。

我的问题是（我假设？）ID 是相同的 - 我使用已经获取的键/ID 呈现数据 - 而 React 需要唯一的。

我不确定是否是导致问题的原因 - 但我不断收到警告说 react 需要唯一的关键道具。

（这是一个商店应用程序 - 点击后，我想将所选商品添加到带有 redux 的购物车...）

想法？

这里我正在构建要渲染的组件

import { useDispatch, useSelector } from 'react-redux'
import { add } from '../features/addToCart'

export const ReduxshopProps = (props) => {
const dispatch = useDispatch()
const handleAddToCart = (props) => {
  dispatch(add(props));
};





  return (<>
                <div key={props.id} className='shopitem'>
                    <img src={props.url} />
                    <h2>{props.title}</h2>
                    <p className='boldprice'>${props.price}</p>
                    <button onClick={() => handleAddToCart(props) }
                      > 
                      
                      ADD TO CART
                      </button>

                    
                </div>
        </>
  )
}

这里我将数据传递给组件

import React from "react"
import { ReduxshopProps } from "./ReduxshopProps"
import shopdata from "./shopdata"



export default function ReduxShop() {


    const cards = shopdata.map(props => {
        return (
            <ReduxshopProps 
            key={props.id}
            title={props.title}
            price={props.price}
            url={props.url} 
        
            />
        )
    })
    return (
    <div className='shopwrapper'>
      <h1>TradingView Indicators</h1>
        <div className='itemWrapper'>
             {cards}
        </div>
    </div>
    )
}

这是从上面提取数据的 REDUX 代码

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    cartItems: [],
    cartTotalQuantity: 0,
    cartTotalAmount: 0,
}


export const addToCartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        
        add(state, action ) {

            const itemIndex = state.cartItems.findIndex(
                (item) => item.id === action.payload.id
                );
                if(itemIndex >= 0){
                    state.cartItems[itemIndex].cartQuantity += 1
                } else {
                    const tempProduct = {...action.payload, cartQuantity: 1}
                    state.cartItems.push(tempProduct);
                }

            
        },
    },

});

export const {add} = addToCartSlice.actions;

export default addToCartSlice.reducer;

在这里，当有人单击按钮时，我正在尝试呈现数据.. onClick 它作为所有组件具有相同的 ID - 我也从下面得到 key prop 错误

import React from 'react'
import { useSelector } from 'react-redux'


function Cart() {
    const cart = useSelector((state) => state.cart)


  return (
    <div>
        <h1>Cart</h1>
        {cart.cartItems.map(cartItem => (
            <div key={cartItem.id}>
            <p>product : {cartItem.title}</p>
            <p>price {cartItem.price}</p>
            <p>quantity : {cartItem.cartQuantity}</p>
            <p>url : <img src={cartItem.url} /></p>
            </div>
        ))}
    </div>
  )
}

export default Cart

Answer 1

你要做的是分配 UUID

终端第一：

npm install uuid

然后：

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

• 更多信息在这里，一个软线程：How to create a GUID / UUID
• 库，在 npm 上：https://www.npmjs.com/package/uuid