React中如何实现useState数组的存在则更新、不存在则添加

问题场景 #

你在React中定义了如下状态：

const [orderData, setOrderData] = useState({
   demoData1: '',
    demoData2: '',
    demoData3: '',
    demoArrayData: [{itemName: '', itemNumber: ''}]
 });

需求是通过onClick函数更新demoArrayData：

• 若要添加的元素已存在，则更新该元素的信息并保留其他元素
• 若不存在，则添加该元素并保留原有元素

当前编写的点击函数如下（存在重复添加相同元素的问题）：

const handlePackageSizeSelection = (selectedItem: number, itemIndex: number, selectedItemName: string, selectedItemPrice: string )=>{
    const orderedListInfo: orderedItemListAttributes = {
        orderedItemName: selectedItemName,
        orderedQuantity: selectedItem?.toString(),
        orderItemPrice: selectedItemPrice,
        orderItemSelectedIndex: itemIndex?.toString()
    }
     setOrderData({...orderData, demoArrayData:[...orderData?.orderedItemList as [], orderedListInfo]})
    setOrderPackageArrayData(updatedArray);       
};

解决方案 #

核心逻辑是先检测元素是否存在，再决定更新还是添加，同时使用函数式更新确保拿到最新的状态值（避免闭包导致的旧状态问题），另外修正原代码中数组名称的错误（orderedItemList应为demoArrayData）：

const handlePackageSizeSelection = (selectedItem: number, itemIndex: number, selectedItemName: string, selectedItemPrice: string )=>{
    const orderedListInfo: orderedItemListAttributes = {
        orderedItemName: selectedItemName,
        orderedQuantity: selectedItem?.toString(),
        orderItemPrice: selectedItemPrice,
        orderItemSelectedIndex: itemIndex?.toString()
    };

    // 使用函数式更新，确保获取最新的state
    setOrderData(prevState => {
        // 找到目标元素的索引（这里用orderItemSelectedIndex作为唯一标识，可根据业务调整）
        const targetIndex = prevState.demoArrayData.findIndex(item => 
            item.orderItemSelectedIndex === orderedListInfo.orderItemSelectedIndex
        );

        let updatedArray;
        if (targetIndex !== -1) {
            // 元素存在：创建新数组，更新对应索引的元素
            updatedArray = [...prevState.demoArrayData];
            updatedArray[targetIndex] = orderedListInfo;
        } else {
            // 元素不存在：添加新元素到数组末尾
            updatedArray = [...prevState.demoArrayData, orderedListInfo];
        }

        // 返回更新后的完整状态
        return {
            ...prevState,
            demoArrayData: updatedArray
        };
    });

    // 原代码中的setOrderPackageArrayData如需同步更新，可基于updatedArray调整后调用
    // setOrderPackageArrayData(updatedArray);
};

关键逻辑说明 #

1. 函数式更新：用setOrderData(prevState => {...})确保每次更新都基于最新状态，避免闭包捕获旧状态引发的错误。
2. 元素存在检测：通过findIndex查找数组中匹配的元素（示例用orderItemSelectedIndex作为唯一标识，可根据业务换成orderedItemName或其他唯一字段）。
3. 数组更新：
   • 元素存在时：复制原数组并替换对应索引的元素，遵循React状态不可变原则。
   • 元素不存在时：复制原数组并追加新元素。

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