React Hooks 根据筛选条件修改按钮文本的问题咨询

问题原因 #

你出现空格丢失的核心原因是代码中直接将用于过滤逻辑的无空格字段值（比如inDelivery、InDelivery这类去掉空格的标识）作为了底部按钮的展示文本，没有区分逻辑标识和展示内容。

修复方案 #

推荐用映射表统一维护过滤逻辑标识和对应显示文本的关系，完全规避这类问题：

• 第一步：在组件外定义过滤项配置

// 键是用于过滤逻辑的标识，值是前端展示的文本
const FILTER_OPTIONS = {
  all: "All",
  order: "Order",
  inDelivery: "In Delivery",
  delivered: "Delivered"
}

• 第二步：点击顶部按钮时，把对应过滤项的键（比如inDelivery）存入控制过滤状态的state中，不要直接存按钮文本
• 第三步：底部按钮渲染时，从映射表中取值展示即可

// 假设你的过滤状态变量为 activeFilter
<button>{FILTER_OPTIONS[activeFilter]}</button>

如果不想改动现有逻辑，也可以临时做字符串转换：把驼峰格式的标识在展示时自动插入空格，比如用正则str.replace(/([A-Z])/g, ' $1')就能把InDelivery转为In Delivery，但长期来看映射表的方案可维护性更高，后续要修改显示文案只需要改配置即可，不需要调整逻辑代码。

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