反应材料表填充下拉菜单

时间:2021-02-09 13:08:42

标签: reactjs material-table

表中的反应,我填充它很好,但我想在编辑时添加下拉列表,并且我希望从 API 调用中填充下拉列表。我得到的结果很好,但我的下拉菜单是空的...

这是我对 API 的调用

useEffect(() => {
        const getPosts = () => {
            const myToken = Cookies.get('access_token');
            if (myToken === undefined) {
                history.push('/auth/login-page');
            } else {
                try {
                    var sortBy = require('array-sort-by');
                    var myPostsUnsorted = [];
                    const months = [
                        'JAN',
                        'FEB',
                        'MAR',
                        'APR',
                        'MAY',
                        'JUN',
                        'JUL',
                        'AUG',
                        'SEP',
                        'OCT',
                        'NOV',
                        'DEC',
                    ];
                    // set the url
                    const myUrl = `${APIurl}products.json?orderBy="approved"&equalTo=0`;
                    //alert(myUrl);
                    axios.get(myUrl).then((res) => {
                        console.log(res.data);
                        const myData = res.data;

                        for (var key1 in myData) {
                            var current_datetime = new Date(myData[key1].modifyDate);
                            var formatted_date =
                                current_datetime.getDate() +
                                '-' +
                                months[current_datetime.getMonth()] +
                                '-' +
                                current_datetime.getFullYear();
                            var filteredPosts = new Object();
                            filteredPosts.category = myData[key1].category;
                            filteredPosts.businessName = myData[key1].businessName;
                            filteredPosts.title = myData[key1].title;
                            filteredPosts.listingPersonId = myData[key1].listingPersonId;
                            filteredPosts.listingPerson = myData[key1].listingPerson;
                            filteredPosts.createDate = formatted_date;
                            filteredPosts.listingPersonTitle =
                                myData[key1].listingPersonTitle;
                            filteredPosts.approved = myData[key1].approved;
                            filteredPosts.att = myData[key1].att;
                            filteredPosts.postId = key1;
                            filteredPosts.att = myData[key1].att;
                            filteredPosts.city = myData[key1].city;
                            filteredPosts.address = myData[key1].address;
                            filteredPosts.email = myData[key1].email;
                            filteredPosts.phone = myData[key1].phone;
                            filteredPosts.webSite = myData[key1].webSite;
                            filteredPosts.region = myData[key1].region;
                            filteredPosts.price = myData[key1].price;
                            filteredPosts.body = myData[key1].body;
                            filteredPosts.stars = myData[key1].stars;
                            function createMarkup() {
                                return {
                                    __html: myData[key1].body,
                                };
                            }
                            filteredPosts.bodyFormatted = (
                                <div dangerouslySetInnerHTML={createMarkup()} />
                            );
                            filteredPosts.image = myData[key1].image;
                            filteredPosts.image2 = myData[key1].image2;
                            filteredPosts.image3 = myData[key1].image3;
                            filteredPosts.image4 = myData[key1].image4;

                            myPostsUnsorted.push(filteredPosts);
                        }
                        const myPostsSorted = sortBy(
                            myPostsUnsorted,
                            (s) => -new Date(s.createDate)
                        );
                        setmyPostData(myPostsSorted);
                        //console.log('Tracing....POSTS:' + JSON.stringify(myPostsSorted));
                        getUsers();
                    });
                } catch (err) {
                    console.log(err);
                }
            }
        };
        const getUsers = () => {
            const myToken = Cookies.get('access_token');
            if (myToken === undefined) {
                history.push('/auth/login-page');
            } else {
                try {
                    var sortBy = require('array-sort-by');
                    var myPostsUnsorted = [];

                    // set the url
                    const myUrl = `${APIurl}users.json?orderBy="active"&equalTo=1`;
                    //alert(myUrl);
                    axios.get(myUrl).then((res) => {
                        console.log(res.data);
                        const myData = res.data;

                        for (var key1 in myData) {
                            var filteredPosts = new Object();
                            filteredPosts[myData[key1].userUid] =
                                myData[key1].firstName + ' ' + myData[key1].lastName;

                            myPostsUnsorted.push(filteredPosts);
                        }
                        const myPostsSorted = sortBy(myPostsUnsorted);
                        setmyUserData(myPostsSorted);
                        //console.log('Tracing....USERS:' + JSON.stringify(myPostsSorted));
                    });
                } catch (err) {
                    console.log(err);
                }
            }
        };

        getPosts();
    }, []);

第一个功能是获取帖子,这工作得很好,这就是我填充材料表的方式。第二个函数也返回结果,这是我获得用户的地方。帖子属于用户,所以如果我想在编辑时更改所有权,我想创建用户下拉列表...

这是我创建列的方式:

const [columns, setColums] = useState([
        { title: 'Category', field: 'category', editable: 'never' },
        { title: 'Business', field: 'businessName', editable: 'never' },
        { title: 'Title', field: 'title', editable: 'never' },
        //{ title: 'Posted by', field: 'listingPersonId', editable: 'never' },
        {
            title: 'Posted by',
            field: 'listingPersonId',
            /*
            lookup: {
                DaChZYtatmVUXskSSzg9GTMsh4J3: 'Peter Andri',
                A1AtLoKhnwctu7Wwxtv85sLwDGj2: 'Christine Wood',
                E1NE6Ed8xIVxGMiYFXmaS9XtSvX2: 'Will Smith',
            },
            */
            lookup: { myUserData },
        },

        { title: 'Created', field: 'createDate', editable: 'never' },
        {
            title: 'Size',
            field: 'att',
            lookup: { '': 'Regular', horizontal: 'Horizontal', full: 'Large' },
        },
        {
            title: 'Stars',
            field: 'stars',
            lookup: { '': '0', 5: '5', 4: '4', 3: '3', 2: '2', 1: '1' },
        },
        { title: 'Approved', field: 'approved', type: 'boolean' },
    ]);

简而言之:当我对值进行硬编码时,我会在控制台日志中输入:

{
                title: 'Posted by',
                field: 'listingPersonId',
                lookup: {
                    DaChZYtatmVUXskSSzg9GTMsh4J3: 'Peter Andri',
                    A1AtLoKhnwctu7Wwxtv85sLwDGj2: 'Christine Wood',
                    E1NE6Ed8xIVxGMiYFXmaS9XtSvX2: 'Will Smith',
                },

这显然没问题,但是当我在查找中传递对象数组时...没有任何反应:

{
            title: 'Posted by',
            field: 'listingPersonId',
            lookup: { myUserData },
        },

此外,如果这可以帮助...这是我的数据跟踪...:

[{"DaChZYtatmVUXskSSzg9GTMsh4J3":"Peter Andri"},{"A1AtLoKhnwctu7Wwxtv85sLwDGj2":"Christine Wood"},{"E1NE6Ed8xIVxGMiYFXmaS9XtSvX2":"Will Smith"}]

是否有人尝试过这样做...谢谢!

1 个答案:

答案 0 :(得分:0)

实际上我发现了问题......我正在向Lookup发送对象数组......当我传递对象时,它开始工作......抱歉误报。