如何确保数组中元素ID不重复？React代码优化求助

原代码存在的问题 #

• ID生成无重复校验：当前newElementId仅随机生成0-99的ID，完全可能出现重复，无法保证唯一性。
• 异步状态更新导致ID错误：setElementId是异步操作，调用newElementId后立刻读取elementId，拿到的始终是更新前的旧值，新添加元素的ID并非预期的新ID。
• 列表渲染key错误：HomePage中map的第二个参数是索引却命名为newElementId，且用索引作为组件key，不符合React最佳实践，也无法关联元素自身ID。
• 解构变量名错误：HomePage中解构了不存在的elementsId，应为elementId。

修正后的代码 #

ElementContext.js

采用递增ID方案（彻底避免重复，比随机生成更可靠），同时移除冗余的elementId状态：

import React, { createContext, useState } from 'react';
import Todobox from './components/Todobox';

export const ElementContext = createContext();

export const ElementContextProvider = ({children}) => {
    const [elements, setElements] = useState([]);

    // 生成唯一ID：取当前最大ID加1，初始为1
    const generateUniqueId = () => {
        if (elements.length === 0) return '1';
        const maxId = Math.max(...elements.map(el => parseInt(el.id)));
        return (maxId + 1).toString();
    };

    const newElement = () => {
        const newId = generateUniqueId();
        setElements(prev => [...prev, {title: 'Placeholder', id: newId}]);
    };

    const value = {
        elements,
        setElements,
        newElement
    };

    return(
        <ElementContext.Provider value={value}>
            {children}
        </ElementContext.Provider>
    )
};

若坚持使用随机ID（需扩大范围降低重复概率），可修改generateUniqueId为循环校验版本：

const generateUniqueId = () => {
    let newId;
    do {
        newId = Math.floor(Math.random() * 10000).toString();
    } while (elements.some(el => el.id === newId));
    return newId;
};

HomePage.jsx

修正解构错误与列表渲染逻辑：

import React, { useContext } from 'react';
import '../App.css';
import Todobox from './Todobox';
import { ElementContext } from '../ElementContext';

export default function HomePage(){
    const { elements, newElement } = useContext(ElementContext);

    return(
        <div className='page-container'>
            <div className='header'>
                <a className='header-title'>Trello Clone!</a>
                <a className='header-button' onClick={newElement}>Create a list</a>
            </div>
            <div className='element-field'>
                {elements.map(element => (
                    <Todobox key={element.id} element={element} />
                ))}
            </div>
        </div>
    )
}

关键说明 #

• 递增ID实现简单，完全规避重复问题，适合连续创建元素的场景。
• 移除单独的elementId状态，直接在创建元素时生成唯一ID，避免异步更新带来的取值误差。
• 使用元素自身ID作为组件key，确保React能正确识别列表项变化，优化渲染性能。

内容的提问来源于stack exchange，提问作者Blazing