reactjs - index.js:1 Warning: Each child in a list should have a unique "key" prop

Question

I am studying reactjs and want to use Ant Design together, but now sure how to set rowKey in antd table. I have set it by using primary key from data source, but not sure why still got this error:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Any help is appreciated.

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;

and this is my data:

标签： reactjsantd