[英]React material-table filling dropdown
反应中的表,我很好地填充它,但我想在编辑时添加下拉列表,我希望从 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"}]
有没有人试图这样做...谢谢!
实际上我发现了问题...我正在向查找发送对象数组...当我刚刚通过 object 时,它开始工作...抱歉误报。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.