react中使用antd的table组件,和axios的请求

import React, { Component } from ‘react’
import { Table } from ‘antd’;// 引入表格组件
import axios from ‘axios’ // 引入axios的请求的方式
export default class Rights extends Component {
// class 类中可以n多个属性
state = {
// 写在状态中,ajax请求可以更新
datalist: null
}
// 临时不是变量 更新状态不调用
columns = [
{
title: ‘#’,
dataIndex: ‘id’,// 映射源数组的属性
key: ‘id’
},
{
title: ‘权限名称’,
dataIndex: ‘title’,// 映射源数组的属性
key: ‘age’
},
{
title: ‘权限等级’,
dataIndex: ‘grade’,// 映射原数据的属性
key: ‘grade’
}
]
// 映射那个字段和key
componentDidMount() {
// db这个接口有很多的接口
/* get请求接口的第一种写法
axios.get(“http://localhost:4000/db”).then(res=>{
this.setState({
datalist: res.data.rights
})
console.log(res.data)
})
/
// get请求接口的第二种写法
axios.get(“http://localhost:4000/rights”).then(res=>{
this.setState({
datalist: res.data
})
console.log(res.data)
})
}
render() {
return (


Rights
{/ dataSource 是源数据*/}
{/* 内部自动map遍历 */}
// 第一种是新的字段叫key字段,第二种是item.name
// rowkey 接受回调函数,返回值将作为key,理想的key可以是是item.id
// pagination是table的属性,pageSize是组件的属性
rowKey={item=>item.id} pagination={{pageSize:5}} />

)
}
}

注意
/*
Warning: Each child in a list should have a unique “key” prop. See https://fb.me/react-warning-keys for more information.
这种错误是没有设置key
*/

你可能感兴趣的:(react)