有没有更好的方法在 FE 上有条件地渲染这些 BE 响应？使用反应

Question

我有一个组件正在为我的 FE 反应组件中的 API 调用映射响应。

API 响应将如下所示：

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

我面临的问题是 status 可以有 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>
  )
})

Answer 1

如何使用对象作为所有已知案例的查找 table，然后回退到“失败：技术错误”以解决其他所有问题

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>
  )
})

有没有更好的方法在 FE 上有条件地渲染这些 BE 响应？使用反应

Is there a better way to conditionally render these BE responses on the FE? using react

ternary

conditional-statements

reactjs