React+Typescript从请求数据到列表渲染

我们在项目src目录下创建一个目录叫 pages
在里面创建一个组件叫 list.tsx
这里我启动了自己的java项目创建接口
在这里插入图片描述
你们就也需要弄几个自己的接口做测试

然后 list.tsx 编写代码如下

import * as React from "react";


export default class hello extends React.Component<any,any> {
    
    

    public componentDidMount() {
    
    
        fetch("/books").then(res =>res.json()).then(data =>{
    
    
          console.log(data);
        });
    }

    public render() {
    
    
        return (
            <div>
                测试请求
            </div>
        )
    }
}

这里一定要记得放反向代理免得跨域了
在这里插入图片描述
然后我们运行项目数据就呈现出来了

然后我们改写代码如下

import * as React from "react";

interface IProps {
    
    
}

interface IState {
    
    
    data: any
}

export default class hello extends React.Component<IProps,IState> {
    
    

    public readonly state: Readonly<IState> = {
    
    
        data: []
    }
    
    public constructor(props:IProps){
    
    
        super(props);
    }

    public componentDidMount() {
    
    
        fetch("/books").then(res =>res.json()).then(data =>{
    
    
            this.setState({
    
    
                data: data.data
            })
        });
    }

    public render() {
    
    
        return (
            <div>
                {
    
    
                    this.state.data.length > 0
                    ?<ul>
                        {
    
    
                            this.state.data.map((item:any,index:number) => {
    
    
                                return <li key = {
    
     index }>{
    
     item.name }</li>
                            })
                        }
                    </ul>
                    :
                    <div>暂无数据</div>
                }
            </div>
        )
    }
}

首先我们定义IState限制state格式里面有一个字段 data
任意类型的
然后我们fetch请求回来数据之后直接通过setState 将请求回来的数据中的 data 赋值给state中的data
然后界面上我们先用三元运算符判断如果data长度是有的就渲染如果没有给用户提示暂无数据

然后渲染的地方我们用了一个基本的map循环
item接受每个下标值 index接受当前是第几个下标
用 index 当元素的key标识
然后每个元素展示当前元素的 name
运行结果如下
在这里插入图片描述
也是没有任何问题

React+Typescript从请求数据到列表渲染

猜你喜欢