umi+react+typescript+dev+request(umi)+hooks请求数据

1,首先用postMen 请求数据在json2ts 上解析类型,如

interface RootObject {
    id: number;
    userName: string;
    passWord: string;
    zgEmail: string;
    telephone: string;
    address: string;
    start?: number;
    ipAddress: string;
    goodsAddress?: any;
    createTime?: any;
    updateTime?: any;
    platformAddress?: number;
    headerImg?: any;
    paypalAccount?: any;
    userGender?: any;
    userAge?: any;
    userDesc?: any;
}

2,创建hook useState,useEffect

  const [umi,umiState] = useState<RootObject[]>([])

3,创建方法, hook

  useEffect(()=>{
    getList()
  },[])
  
  const getList = async()=>{
      const list = await request("http://localhost:9999/api/user/findAll",{
        method: 'GET'
      });
      umiState(list)
      console.log(list)
      // request('/XXX/userManager/queryUserByName', {
      //   method: 'POST',
      //   data: params,
      // });
  }

4,渲染数据

<div>{umi.map((v,i)=>{
          return (
            <div key={i}> {v.ipAddress} </div>
          )
        })}</div>

这样我们利用react+typescript+hooks+umi+dev完整请求案例结束