React和react表

Question

这是我的第一个react项目...所以在这方面还是很新的。

我在渲染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。这是我做的第一个react表..

谢谢！！

以下是我从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"

Answer 1

我不明白for (var key1 in myData) {是怎么回事

如果你从api得到的数据是数组，并且你想要过滤它，那么你应该使用map。