#reactjs #conditional-statements #ternary
Вопрос:
У меня есть компонент, который отображает ответы на вызов 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>
)
})
Комментарии:
1. Я бы сделал другой компонент (с любым из приведенных ниже ответов), который принимает текст и возвращает нужный текст… Таким образом, вы не загромождаете свой компонент.
Ответ №1:
Как насчет использования объекта в качестве таблицы поиска всех известных случаев и возврата к «Сбою: техническая ошибка» для всего остального
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>
)
})
Комментарии:
1. Спасибо, это было здорово