Блог

У меня есть компонент, который отображает ответы на вызов API в моем компоненте FE react.

Ответ API будет выглядеть примерно так :

 [
  {
    time: '1:00pm'
    status: 'Success'
  },
  {
    time: '2:00pm'
    status: 'Failed: Invalid ID'
  },
]
 

Проблема, с которой я сталкиваюсь, заключается в том, что статус может иметь 7 разных значений, и вместо того, чтобы напрямую отображать этот текст статуса в компоненте, меня просят отобразить аналогичный, но немного измененный текст на основе значения статуса.

 /*
BE Response Text                  | Text to display on the FE
"Failed: Invalid Portal ID"         Failure: Incorrect Username
"Password Lockout"                  Failure: Account Locked
"Invalid Password"                  Failure: Incorrect Password
"Passwordless Login Required"       Failure: Passwordless login required
"Restricted IP"                     Failure: Restricted IP
*any other failure message*         Failure: Technical Error
"Success"                           Success
*/
 

Я не уверен, что здесь делать, я бы подумал, что это, вероятно, должно быть обработано в BE, но меня просят сделать это в FE, не совсем уверенный, каким будет наилучший подход, возможно, цепочка троичных чисел?

Что у меня есть до сих пор:

 response.map() => {
  return (
    <div>
      {response.status === 'Success'
        ? response.status
        : `Failure ${response.status}`}
    </div>
  )
})
 

Как насчет использования объекта в качестве таблицы поиска всех известных случаев и возврата к «Сбою: техническая ошибка» для всего остального

 const strings = {
  Success: "Success",
  "Failed: Invalid Portal ID": "Failure: Incorrect Username";
  "Password Lockout": "Failure: Account Locked";
  // etc
}

response.map(() => {
  return (
    <div>
      {strings[response.status] || "Failure: Technical Error"}
    </div>
  )
})