表中的反应,我填充它很好,但我想在编辑时添加下拉列表,并且我希望从 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"}]
是否有人尝试过这样做...谢谢!
答案 0 :(得分:0)
实际上我发现了问题......我正在向Lookup发送对象数组......当我传递对象时,它开始工作......抱歉误报。