Question

我正在研究reactjs，想一起使用Ant Design，但是现在确定如何在antd表中设置rowKey。我已经使用数据源中的主键进行了设置，但是不确定为什么仍然出现此错误：

index.js：1警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

感谢您的帮助。

class DoctorList extends Component {
    constructor(props){
        super(props);
        this.state = {
            pageNumber: 1,
            pageSize: 10,
            keyWork:"",
            // modal: cancel notification 
            visible:false,
            doctorID:"",
            // table header
            columns:[
                {title:"DoctorID", dataIndex:"doctorID", key:"doctorIdMenu", width:100},
                {title:"First Name", dataIndex:"firstName", key:"firstName"},
                {title:"Last Name", dataIndex:"lastName", key:"lastName"},
                {title:"Medical Center", dataIndex:"medicalCenter", key:"medicalCenter"},
                {title:"Management", dataIndex:"management", key:"management", width:200,
                    render:(text, rowData) =>{
                        return(
                            <div>
                                <Button className="delDoctorButton" onClick={()=>this.delDoctor(rowData.doctorID)} >Delete</Button>
                                <Button className="planButton" type="primary">
                                    <Link to={{pathname: "/index/plan", state:{doctorid: rowData.doctorID}}} >Plan</Link>
                                </Button>
                            </div>
                        )
                    } 
                }   
            ],
            // tabel data
            data:[{},],   
        };
    }
    // load data 
    componentDidMount() {
        this.loadData();
    }
    // get doctor list
    loadData = () => {   
        axios.get(`http://localhost:80/doctor-admin/src/api/api?action=readDoctorName`,{withCredentials:true})
        .then(res => {
            console.log(res.data);
            const doctors = res.data;

            if(doctors){
                this.setState({ 
                    data:doctors 
                });
            }   
        })
        .catch((error) => {
            console.log(error)
        });
    }

    render(){
        const { columns, data } = this.state;
        return(
            <Fragment>
                <a className="addDoctor" style={{display: "table-cell"}} href = "/index/add">
                    <Button className="addDoctorButton" type="primary" htmlType="submit">
                        Add New Doctor
                    </Button>
                </a>
                <Table rowKey={record=> record.doctorID} columns={columns} dataSource={data} bordered />
            </Fragment>
        )
    }
}
export default DoctorList;

这是我的数据：

index.js：1警告：列表中的每个孩子都应该有一个唯一的“键”道具

0 个答案: