开发Next.js亚马逊克隆时，添加两位数ID为何数组长度增2？

我正在学习Next.js，开发亚马逊克隆项目时遇到了问题：用React Context把选中商品的ID存入数组，数据能正常存储和访问，但添加ID为两位数的商品时，数组的length属性会增加2。

我的代码： #

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  var [basket, addToBasket]= useState([]);

  return (
    <AppContext.Provider value={[basket, addToBasket]}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

function Product({id, title, price, description, category, image }) {
 var [basket, addToBasket] = useAppContext();

 const addItemToBasket = () => {
 addToBasket(basket + id);
 }

return(
     <button onClick={addItemToBasket} className='button'>Add to Basket</button>
        <h1>items ID in basket: {basket}</h1>
        <h1>length of array: {basket.length}</h1>
     )
}

我尝试过的无效方法： #

let counter = 0;
 
 const addItemToBasket = () => {
  for (let i = 0; i < basket.length; i++) {
   if (basket[i].status === '0') counter++;
 };
 addToBasket(basket + id);
 }

然后把长度显示改成：

<h1>length of array: {counter}</h1>

我是JavaScript新手，试了很多变体都没解决，求帮忙。

解决方案： #

问题核心在addToBasket(basket + id)这一行：JavaScript中用+连接数组和数字时，会把数组自动转成字符串拼接，比如原数组[1]加上ID12会变成字符串"112"，而非数组[1,12]。字符串的length统计的是字符个数，所以两位数ID会让长度增加2。

正确的做法是往数组中添加元素，而非字符串拼接，同时要遵循React状态更新的规则——不能直接修改原数组，要返回新数组：

const addItemToBasket = () => {
  // 用扩展运算符创建新数组，添加新ID
  addToBasket([...basket, id]);
}

或者使用数组的concat方法：

const addItemToBasket = () => {
  addToBasket(basket.concat(id));
}

另外建议把代码中的var替换为const，因为状态变量和上下文返回的变量不需要重新赋值：

// AppWrapper组件内
const [basket, addToBasket]= useState([]);

// Product组件内
const [basket, addToBasket] = useAppContext();

修改后，无论ID是几位数，数组长度都会正确增加1，购物车内容也会保持数组格式的正确显示。

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