[英]Bindig issue in react using ant design framework
I am making CRUD application on react Using ant design, i am using axios to get data from nodejs server我正在使用 ant 设计对 CRUD 应用程序进行反应,我正在使用 axios 从 nodejs 服务器获取数据
Here is the code of Table这是表的代码
<Table columns={columns} dataSource={dataSource} />
here is the useState where i am saving my data这是我保存数据的 useState
const [dataSource,SetDataSource] = useState([])
here is the useEffect for fetching data这是用于获取数据的 useEffect
useEffect(() => {
const load = async () => {
try {
const res = await fetch('http://localhost:4000/stock/list')
const myData = await res.json();
const check = myData.data;
console.log(check)
SetDataSource(check)
console.log(dataSource)
// console.log(myData.data)
// console.log(allItems);
} catch (error) {
console.log(error)
}
}
load()
}, []
)
here are columns using in my table这是我的表中使用的列
const columns = [
{
title: 'Item Name',
dataIndex: 'name',
key: '1',
render: text => <a>{text}</a>,
},
{
title: 'Category',
dataIndex: 'Category',
key: '2',
},
{
title: 'Item Price',
dataIndex: 'Item_Price',
key: '3',
},
{
title: 'Item Amount',
dataIndex: 'Item_Amount',
key: '4',
},
{
title: 'Action',
key: '5',
render: (record) => {
return(
<>
<EditOutlined onClick={()=>{
onEditItems(record)
}}/>
<DeleteOutlined onClick={()=>{
onDeleteItems(record)
}} style={{color:"red", marginLeft:12}}/>
</>
);
}
},
];
here are items showing in my console log这是我的控制台日志中显示的项目
here is my screen where i have to display my records这是我的屏幕,我必须在其中显示我的记录
dataIndex must be same as the property name in the response. dataIndex 必须与响应中的属性名称相同。 for example for first column dataIndex should be 'itemName' which is property from the response.
例如,第一列 dataIndex 应该是响应中的属性“itemName”。
So you columns object will be as follow所以你的列 object 将如下所示
const columns = [
{
title: 'Item Name',
dataIndex: 'itemName',
key: '1',
render: text => <a>{text}</a>,
},
{
title: 'Category',
dataIndex: 'itemCategory',
key: '2',
},
{
title: 'Item Price',
dataIndex: 'itemPrice',
key: '3',
},
{
title: 'Item Amount',
dataIndex: 'stockAmount',
key: '4',
},
{
title: 'Action',
key: '5',
render: (record) => {
return(
<>
<EditOutlined onClick={()=>{
onEditItems(record)
}}/>
<DeleteOutlined onClick={()=>{
onDeleteItems(record)
}} style={{color:"red", marginLeft:12}}/>
</>
);
}
},
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.