这是我的第一个React项目...所以在这方面还是很新的。
我在渲染反应表时遇到困难。
在页面顶部,我有:
const [myData, setmyData] = React.useState([]);
useEffect(() => {
if (!auth.isAuthenticated()) {
history.push('/auth/login-page');
}
const getPosts = () => {
try {
var sortBy = require('array-sort-by');
var myPostsUnsorted = [];
// set the url
const myUrl = `https://.........................com/products.json?orderBy="approved"&equalTo=0`;
axios.get(myUrl).then((res) => {
console.log(res.data);
const myData = res.data;
for (var key1 in myData) {
var filteredPosts = new Object();
filteredPosts.category = myData[key1].category;
filteredPosts.businessName = myData[key1].businessName;
filteredPosts.title = myData[key1].title;
filteredPosts.listingPerson = myData[key1].listingPerson;
filteredPosts.createDate = myData[key1].createDate;
filteredPosts.listingPersonTitle = myData[key1].listingPersonTitle;
filteredPosts.postId = key1;
filteredPosts.att = myData[key1].att;
myPostsUnsorted.push(filteredPosts);
}
const myPostsSorted = sortBy(
myPostsUnsorted,
(s) => -new Date(s.createDate)
);
setmyData(myPostsSorted);
});
} catch (err) {
console.log(err);
}
};
getPosts();
}, []);
从那里我得到的数据完全没有问题。
然后我正在为dataTable设置数据:
const [data, setData] = React.useState(
myData.map((prop, key) => {
console.log(prop);
return {
id: key,
category: prop.category,
business: prop.businessName,
title: prop.title,
listingPerson: prop.listingPerson,
createDate: prop.createDate,
actions: (
// we've added some custom button actions
<div className="actions-right">
{/* use this button to add a like kind of action */}
<Button justIcon round simple color="info" className="like">
<Favorite />
</Button>{' '}
{/* use this button to add a edit kind of action */}
<Button justIcon round simple color="warning" className="edit">
<Dvr />
</Button>{' '}
{/* use this button to remove the data row */}
<Button justIcon round simple color="danger" className="remove">
<Close />
</Button>{' '}
</div>
),
};
})
);
在console.log(3行)中,我看到了我需要的所有数据。
和react表是:
return (
<GridContainer>
<GridItem xs={12}>
<Card>
<CardHeader color="primary" icon>
<CardIcon color="primary">
<Assignment />
</CardIcon>
<h4 className={classes.cardIconTitle}>Posts Waiting Approval</h4>
</CardHeader>
<CardBody>
<ReactTable
data={data}
filterable
columns={[
{
Header: 'Category',
accessor: 'category',
},
{
Header: 'Business',
accessor: 'business',
},
{
Header: 'Title',
accessor: 'title',
},
{
Header: 'Listing Person',
accessor: 'listingPerson',
},
{
Header: 'Created On',
accessor: 'createDate',
},
{
Header: 'Actions',
accessor: 'actions',
sortable: false,
filterable: false,
},
]}
defaultPageSize={10}
showPaginationTop
showPaginationBottom={false}
className="-striped -highlight"
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
我不知道怎么了...
PS。这是我做过的第一个反应表。
谢谢!
这里是我从console.log获取的示例数据:
att: ""
businessName: "Non Profit PRC2"
category: "Non Profit"
createDate: "10-JUN-2020"
listingPerson: "Will Smith"
listingPersonTitle: "CEO"
postId: "-M9SzBEJa7GDiidtzaYN"
title: "Non Profit UPS 2"
这是我的第一个React项目...所以在这方面还是很新的。我在渲染反应表时遇到困难。在页面顶部,我有:const [myData,setmyData] = React.useState([]); ...
我不知道for (var key1 in myData) {
中发生了什么