根据过滤器更改按钮文本答案

【问题标题】：changing button text according to filter根据过滤器更改按钮文本
【发布时间】：2021-05-19 17:02:14
【问题描述】：

这里是新的 react(hooks) 开发者，问题与使用过滤器时更新状态有关，在这里我有 5 个按钮，两个“全部”按钮，我的意思是当用户单击例如“交付中”按钮时，表格下方的“全部”按钮现在应该将其名称从“全部”更改为“交付中”它将其更改为“InDelivery”（这不是按钮名称），并且与其他人的相同内容也是“已交付”、“订单”和“所有”我的代码： https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js

【问题讨论】：

如果不可能，还有其他方法吗？
你需要什么O/P，检查小提琴时，它会改变标签
按钮名称是“In Delivery”而不是“InDelivery”
您将过滤器值分配为过滤器标签，它现在的工作方式就像那样
https://codesandbox.io/s/peaceful-fog-lr6os?file=/src/Test.js 检查更新的小提琴，如果有帮助，请告诉我。

标签： javascript html reactjs typescript react-hooks

【解决方案1】：

这行得通， https://codesandbox.io/s/confident-moore-zn67w?file=/src/Test.js

我添加了另一个名为 OrderLabel 的对象，

const OrderLabel = {
  Order: "Order",
  InDelivery: "In Delivery",
  Delivered: "Delivered"
};

我正在使用OrderLabel 来设置ButtonText 状态的值，

 setButonText(OrderLabel[filter]);

【讨论】：

@AkhilAravind 您能否详细说明为什么它不起作用？
https://codesandbox.io/s/peaceful-fog-lr6os?file=/src/Test.js 检查我的解决方案，简化了很多。写得越少，力量越大
@AkhilAravind 这并不能解释为什么你认为我提供的那个不能按预期工作？
因为您正在再次创建确切的对象，如果是这样，它可以用一个简单的 if 条件来解决。我们使用 react 来消除代码重复（我认为是这样）。一次又一次地创建同一个对象有什么意义...
@AkhilAravind 我喜欢你的解决方案，我认为它更好。您应该添加您的解决方案作为答案。但是，您说我提供的那个“不会按预期工作”。你还没有说明你为什么这么认为？