Reactjs Typescript React-使用状态而不是逐个变量检查的条件呈现

我见过许多开发人员（包括我）执行一些条件渲染，检查变量值，如下所示：

import React, { useState, useMemo } from 'react'

const Page = () => {
  const [data, setData] = useState<any[]>()

  if (!data) return 'Loading...'

  if (data.length === 0) return 'Empty'

  if (data && data.length > 0) {
    return data.map(item => item)
  }

  return null
}

import React, { useState, useMemo } from 'react'

enum PageStatus {
  loading,
  empty,
  withResults
}

const Page = () => {
  const [data, setData] = useState<any[]>()

  const status = useMemo(() => {
    if (!data) {
      return PageStatus.loading
    }

    if (data.length > 0) {
      return PageStatus.withResults
    }

    return PageStatus.empty
  }, [data])

  if (status === PageStatus.empty) {
    return 'Empty'
  }

  if (status === PageStatus.withResults) {
    return data.map(item => item)
  }

  return null
}

import React，{useState，usemo}来自“React”
常量页=（）=>{
const[data，setData]=useState。也许有一种方法可以在运行时强制转换/绑定变量，但我没有找到任何与此相关的内容

那么，您知道是否可以将条件呈现定向到状态/状态而不是单个变量值？或者更好的方式？我感谢您的帮助，谢谢。
您没有使用任何数据初始化，因此推断的类型将是
any[]|未定义的
。与其使用类型

任何，不如使用类型并用一些数据初始化。（可能是空数组）

import React，{useState，usemo}来自“React”
枚举页面状态{
加载，
空的,，
结果
}
接口虚拟{
名称：string
}
常量页=（）=>{
const[data，setData]=useState（[]）
const status=useMoom（（）=>{
如果（！数据）{
返回页面状态。正在加载
}
如果（data.length>0）{
返回PageStatus.withResults
}
返回PageStatus.empty
}，[数据]）
如果（状态===PageStatus.empty）{
返回“空”
}
如果（状态===PageStatus.withResults）{
返回data.map（item=>item）
}
返回空
}

---

链接到

我认为您的问题在于您依赖于Typescript来识别

数据

是从一个函数定义的，该函数接受一个函数作为定义

数据的参数（
useMemo
）

第一个参数中定义
数据
的函数不是在非
react
环境中运行的-它没有（）在它之后。我们知道它是由框架运行的，因为我们信任
usemo
，但Typescript不信任它。Typescript不知道
usemo
和依赖项，所以它无法知道它是定义的……除非它做了一些我认为超出范围的深入代码挖掘

这是我为数不多的几次使用
data！.map（
。我尽量避免使用它，但框架魔法是我使用它的地方。
这里的问题是TypeScript无法将正确的状态与函数的结果联系起来。我们需要的是一个将状态类型等同于实际返回的数据的联合类型

import React, { useState, useMemo } from 'react'

enum PageStatus {
  loading,
  empty,
  withResults
}

type StatusData<T> = {
  status: PageStatus.loading,
  data: undefined
} | {
  status: PageStatus.empty,
  data: []
} | {
  status: PageStatus.withResults,
  data: T[];
}

const Page = () => {
  const [data, setData] = useState<string[]>();   // just assuming string here

  const statusData = useMemo((): StatusData<string> => {
    if (!data) {
      return {
        status: PageStatus.loading,
        data
      }
    }

    if (data.length > 0) {
      return {
        status: PageStatus.withResults,
        data
      }
    }

    return {
      status: PageStatus.empty,
      data: [],
    }
  }, [data]);

  if (statusData.status === PageStatus.empty) {
    return 'Empty'
  }

  if (statusData.status === PageStatus.withResults) {
    return statusData.data.map(item => item)
  }

  return null
}

import React，{useState，usemo}来自“React”
枚举页面状态{
加载，
空的,，
结果
}
类型StatusData={
状态：PageStatus.loading，
数据：未定义
} | {
状态：PageStatus.empty，
数据：[]
} | {
状态：PageStatus.withResults，
数据：T[]；
}
常量页=（）=>{
const[data，setData]=useState（）；//此处仅假设字符串
const statusData=usemo（（）：statusData=>{
如果（！数据）{
返回{
状态：PageStatus.loading，
数据
}
}
如果（data.length>0）{
返回{
状态：PageStatus.withResults，
数据
}
}
返回{
状态：PageStatus.empty，
数据：[]，
}
}，[数据]；
if（statusData.status==PageStatus.empty）{
返回“空”
}
if（statusData.status==PageStatus.withResults）{
return statusData.data.map（item=>item）
}
返回空
}

这会扰乱加载状态
import React, { useState, useMemo } from 'react'

enum PageStatus {
  loading,
  empty,
  withResults
}

type StatusData<T> = {
  status: PageStatus.loading,
  data: undefined
} | {
  status: PageStatus.empty,
  data: []
} | {
  status: PageStatus.withResults,
  data: T[];
}

const Page = () => {
  const [data, setData] = useState<string[]>();   // just assuming string here

  const statusData = useMemo((): StatusData<string> => {
    if (!data) {
      return {
        status: PageStatus.loading,
        data
      }
    }

    if (data.length > 0) {
      return {
        status: PageStatus.withResults,
        data
      }
    }

    return {
      status: PageStatus.empty,
      data: [],
    }
  }, [data]);

  if (statusData.status === PageStatus.empty) {
    return 'Empty'
  }

  if (statusData.status === PageStatus.withResults) {
    return statusData.data.map(item => item)
  }

  return null
}