如何在TSX中使用三元运算符完成组件条件渲染

你的代码存在两个核心错误，按顺序修复即可：

1. 异步请求处理逻辑错误 #

fetch返回的是Promise对象，无法同步读取返回数据的id属性，需要配合React状态钩子存储请求结果，使用useEffect触发异步请求。

2. TSX返回语法错误 #

return语句外层多包裹了不必要的大括号，TSX组件直接返回JSX表达式即可，额外的大括号会被识别为对象声明，导致编译失败。

适配TS的完整修复代码 #

import { useEffect, useState } from 'react'

// 先定义接口返回数据的TS类型，按你实际接口结构调整
interface ResponseData {
  id?: string
  // 其他返回字段自行补充
}

function YourComponent() {
  // 定义状态存储请求结果和异常标识
  const [data, setData] = useState<ResponseData | null>(null)
  const [isError, setIsError] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url)
        const result = await res.json() as ResponseData
        setData(result)
      } catch (e) {
        console.log(e)
        setIsError(true)
      }
    }
    fetchData()
  }, [])

  // 注意返回表达式外层无多余大括号
  if (isError) return <span>fail</span>
  return data?.id ? <span>success!</span> : <span>fail</span>
}

如果你的项目不支持可选链运算符?.，可以把最后一行判断改为return (data && data.id) ? <span>success!</span> : <span>fail</span>

内容的提问来源于stack exchange，提问作者scripter2021