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
运行结果如下

也是没有任何问题