反應材料表填充下拉

Question

反應中的表，我很好地填充它，但我想在編輯時添加下拉列表，我希望從 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();
    }, []);

首先 function 用於獲取帖子，這工作得很好，這就是我填充材料表的方式。 第二個 function 也在返回結果，這就是我吸引用戶的地方。 帖子屬於用戶，所以如果我想在編輯時更改所有權，我想創建用戶下拉列表...

這是我創建列的方式：

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"}]

有沒有人試圖這樣做...謝謝！

Answer 1

實際上我發現了問題...我正在向查找發送對象數組...當我剛剛通過 object 時，它開始工作...抱歉誤報。