Реагируйте, как я могу отобразить несколько значений для эффективности

Question

У меня есть массив поиска, который сопоставляет цвет со значением.Входящее значение может быть из более чем одного свойства, например

const data = {
  status4Weeks: "2",
  status8Weeks: "3",
  status12Weeks: "4"
};

Мой поиск найдет значение, например, "4" и даст 4 назначенный цвет.В настоящее время мне пришлось написать 3 идентичных сопоставления для 3 свойств.Мне нужно сделать какое-то отображение, которое смотрит на ключ, назначить цвет и отобразить это в пользовательском интерфейсе.Мой пользовательский интерфейс также дублируется 3 раза.

const COLORS = {
  one: "#4caf50",
  two: "#81c784",
  three: "#ffee58",
  four: "#FFC107",
  five: "#ff7043",
  six: "#f44336",
  seven: "#455a64"
};

const status4WeeksColor = [
  data.status4Weeks === "1"
    ? COLORS.one
    : data.status4Weeks === "2"
    ? COLORS.two
    : data.status4Weeks === "3"
    ? COLORS.three
    : data.status4Weeks === "4"
    ? COLORS.four
    : data.status4Weeks === "5"
    ? COLORS.five
    : data.status4Weeks === "6"
    ? COLORS.six
    : data.status4Weeks === "7"
    ? COLORS.seven
    : COLORS.seven
];

Дублирование ниже для двух других свойств ...

const status8WeeksColor = [
  data.status8Weeks === "1"
    ? COLORS.one
    : data.status8Weeks === "2"
    ? COLORS.two
    : data.status8Weeks === "3"
    ? COLORS.three
    : data.status8Weeks === "4"
    ? COLORS.four
    : data.status8Weeks === "5"
    ? COLORS.five
    : data.status8Weeks === "6"
    ? COLORS.six
    : data.status8Weeks === "7"
    ? COLORS.seven
    : COLORS.seven
];

const status12WeeksColor = [
  data.status12Weeks === "1"
    ? COLORS.one
    : data.status12Weeks === "2"
    ? COLORS.two
    : data.status12Weeks === "3"
    ? COLORS.three
    : data.status12Weeks === "4"
    ? COLORS.four
    : data.status12Weeks === "5"
    ? COLORS.five
    : data.status12Weeks === "6"
    ? COLORS.six
    : data.status12Weeks === "7"
    ? COLORS.seven
    : COLORS.seven
];

См. Мой код и коробку для полного кода: https://codesandbox.io/s/pj0yk6z91x

На этой странице слишком много кода, чем требуется, я уверен!

Answer 1

Вы можете изменить способ отображения цветов: вместо использования имен свойств слов вы можете использовать строковые числовые значения, например:

const COLORS = {
  '1': "#4caf50",
  '2': "#81c784",
  '3': "#ffee58",
  '4': "#FFC107",
  '5': "#ff7043",
  '6': "#f44336",
  '7': "#455a64"
}

Таким образом, вы можете получить к нему доступ только с помощью:

const status4WeeksColor = COLORS[data.status4Weeks]
// or const status8WeeksColor = COLORS[data.status8Weeks]
// or const status12WeeksColor = COLORS[data.status12Weeks]

Если вам нужно значение по умолчанию, вы можете сделать что-то вроде:

const DEFAULT = '7'
const status4WeeksColor = COLORS[data.status4Weeks] || COLORS[DEFAULT]

С этим типом доступа вы можете легко сопоставить свои массивы.