Next.js 如何根据 FaunaDB 中的数据渲染元素

Question

我正在尝试根据用户的工作资料状态呈现不同的元素。我正在使用 FaunaDB 和 useSWR 来获取数据，并且在执行 console.log(userData):

时我得到了以下对象

jobProfile: {status: 'active'}

我正在使用 userData 作为参数在页面上导入并调用名为 profileStatusIndicator(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) return 对象。如果我执行 console.log(profileStatus) 它不会 return 控制台中的任何内容。

你能看出我做错了什么吗？

Answer 1

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

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

然后我调用了我想要它显示的函数。

Next.js 如何根据 FaunaDB 中的数据渲染元素

How to render element based on data from FaunaDB in Next.js

reactjs

next.js

faunadb