React计数器应用：移除末尾连字符及避免重复值问题

核心问题分析 #

1. 重复添加数值：原逻辑直接拼接字符串，未判断当前数值是否为最后一次保存的内容，导致重复点击会重复追加。
2. 末尾连字符：字符串拼接方式难以精准控制最后一个字符，容易残留分隔符。
3. 重置报错：重置时将counter设为数字0，但后续代码调用了字符串方法endsWith，数字类型无此方法导致报错。

最优修复方案：用数组存储记录 #

放弃直接拼接字符串的方式，改用数组保存所有已记录的数值，渲染时通过join('-')生成目标格式，从根源解决上述问题：

1. 调整状态类型 #

将原counter状态改为数组类型（例如命名为savedCounts），初始值设为空数组：

const [savedCounts, setSavedCounts] = useState([]);

2. 重写保存逻辑 #

判断当前数值不为0，且与数组最后一项不同时，再添加到数组中，避免重复：

const save = () => {
  if (count !== 0) {
    // 仅当数组为空，或最后一项与当前count不同时，才添加新记录
    if (savedCounts.length === 0 || savedCounts.at(-1) !== count) {
      setSavedCounts(prev => [...prev, count]);
    }
  }
};

3. 修复重置函数 #

重置时将数组置空，而非设置为数字：

const reset = () => {
  setCount(0);
  setSavedCounts([]);
  setAddAll([]);
  setAddOnce(false);
};

4. 渲染目标格式 #

在页面中通过join('-')将数组转为指定格式的字符串，自动处理分隔符，不会出现末尾连字符：

<div>{savedCounts.join('-')}</div>

方案优势 #

• 彻底解决重复添加问题：通过数组最后一项比对，精准控制添加逻辑。
• 自动处理分隔符：join('-')只会在元素之间插入连字符，天然避免末尾残留。
• 消除重置报错：数组类型无需调用字符串方法，状态类型统一。

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