如何基于FaunaDB数据在Next.js中渲染元素

Question

我试图根据用户的职务配置文件状态呈现不同的元素。我使用FaunaDB和useSWR来获取数据，并在执行console.log(UserData)时获取以下对象：

jobProfile: {status: 'active'}

我在页面上导入和调用一个名为profileStatusIndicator(userData)的函数，userData作为参数。

export const profileStatusIndicator = (userData) => {
  console.log(userData) //returns object: jobProfile: {status: 'active'}  
  const profileStatus = (status) =>
    userData?.jobProfile?.status?.includes(status)
  console.log(profileStatus) //returns nothing 

  if (profileStatus("active")) return active
  if (profileStatus("occupied")) return occupied
  if (profileStatus("inactive")) return inactive

  const active = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-green-400 ring-2 ring-white" />
    </>
  )

  const occupied = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-yellow-400 ring-2 ring-white" />
    </>
  )

  const inactive = (
    <>
      <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
    </>
  )
}

执行console.log(userData)返回对象。如果我执行console.log(profileStatus)，它不会在控制台中返回任何内容。

你能发现我做错了什么吗？

Answer 1

我的最初解决方案是在profileStatusIndicator函数中实现一个开关语句：

 const profileStatus = userData?.jobProfile?.status

  const profileStatusIndicator = (profileStatus) => {
    switch (profileStatus) {
      case "active":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-green-400 ring-2 ring-white" />
        )
      case "inactive":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
        )

      case "occupied":
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-yellow-400 ring-2 ring-white" />
        )

      default:
        return (
          <span className="absolute top-1 right-1 block h-6 w-6 rounded-full bg-gray-400 ring-2 ring-white" />
        )
    }
  }

然后，我调用了我希望它显示的函数。