最新前端面试题及答案，antd pro学习入门笔记+todolist实例，前端开发技术栈

{/*

{herolist && herolist.map((item: any, index: number) => {

return (

• {item.cname}{'->'}{item.title}

• )

  })}

  */}

  </>

  );

  }

  export default connect(({ heros }: any) => ({ heros }))(HeroMall)

  

  页面内数据管理

  在页面文件夹下面使用_mock.ts、model.ts、services.ts就可以了 建立方法和全局一样，路径要自己配置

  

  

  import React, { useEffect } from ‘react’; // import { getHeroList } from ‘…/…/services/heros’

  import { connect, Dispatch } from ‘umi’;

  import { Table, Tag } from ‘antd’;

  import HeroTableSearch from ‘./HeroTableSearch’;

  const HeroMall = (props: any) => {

  console.log(props);

  useEffect(() => {

  let { dispatch } = props;

  dispatch({

  type: ‘mall/fetchHeroList’,

  }); //触发model中的effect，带上命名空间

  }, []); // fetch(‘/api/herolist’).then(res=>{

  // //console.log(res)

  // return res.json()

  // }).then(res=>{

  // console.log(res)

  // })

  // fetch(‘/api/heros’).then(res=>{

  // //console.log(res)

  // return res.json()

  // }).then(res=>{

  // console.log(res)

  // })

  // getHeroList().then((res)=>{

  // console.log(res)

  // })

  let { mall } = props;

  let herolist = mall && mall.herolist && mall.herolist.herolist;

  console.log(herolist); // ename: 105

  // cname: “廉颇”

  // title: “正义爆轰”

  // new_type: 0

  // hero_type: 3

  // skin_name: “正义爆轰|地狱岩魂”

  const columns = [

  {

  title: ‘Id’,

  dataIndex: ‘ename’,

  key: ‘ename’,

  render: text => {text},

  },

  {

  title: ‘英雄’,

  dataIndex: