基于react的map数组遍历模拟接口数据

/*
 * @Author: Qingshan_Chen
 * @Date: 2022-01-19 16:29:51
 * @Description: 遍历模拟数据，使用函数组件
 * @LastEditors: Qingshan_Chen
 * @LastEditTime: 2022-01-21 10:13:59
 * @FilePath: \app\src\pages\home\index.js
 */
import React, { useEffect, useState } from 'react';
import axios from "axios"; //引入axios请求数据方式
import Mock from 'mockjs' //es6语法


function Index() {
  const [tableList,setList]=useState([])
  Mock.mock("http://localhost:3000/#/table/basic/dataSource2",function() {
      return Mock.mock({
          "code":200,
          "msg":"",
          "result":{
              "list|15":[{
                  "id|+1":1,
                  "userName":"@cname",
                  "sex|0-1":"1",
                  "status|1":[1,2,3,4,5],
                  "interest|1":[1,2,3,4,5],
                  "birthday":"2020-5-20",
                  "address":"@province",
                  "time":"09:00"
              }],
              "page":1,
              "page_size":1,
              "total":100
          }
      })
  })
     useEffect(function(){
      axios.get("http://localhost:3000/#/table/basic/dataSource2")//接口地址与拦截地址要一致
      .then((res)=>{
        console.log('res',res.data.result); //可以通过res.data.result获取数据
        setList(res.data.result.list) //数组遍历
        })
     },[])//必须加空数组，否则无限循环数据请求
  return (
   
    <div>
      {tableList.map(function(item){
          return (<h1 key={item.id}>{item.userName}</h1>)
      })}
    </div>
  );
}

export default Index

 mock.js安装：

yarn mockjs