[英]How to populate dropdown options dynamically using a promise
import { getCustomer } from './Customers';
let optionItems=[];
export const LOV: React.FunctionComponent = () => {
const loadCustomer = async () => {
const data = await getCustomer();
for (var i=0; i < data.value.length ; ++i)
{
optionItems.push({
key: data.value[i].CustomerId,
text: data.value[i].CustomerName
});
}
}
useEffect(() => {
loadCustomer();
}, [])
return (
<SearchableDropdown options={optionItems}/>
);};
Code in Customers.tsx Customers.tsx 中的代码
export const getCustomer = async (): Promise<any> => {
const response = await
$.ajax({
url: apiURL,
type: "GET",
headers: headers,
data: null,
cache: false,
beforeSend: function (request) {
request.setRequestHeader("Authorization", 'Bearer ' + accessToken);
}
})
.done( function (data) {
return data;
})
.fail(function (jqXHR) {
if (jqXHR.status == 401) {
promptAuth(jqXHR.getResponseHeader("WWW-Authenticate"));
}
else {
console.log("NOT 401");
}
});
return response;
}
I'm trying to populate a dropdown dynamically using a promise.我正在尝试使用 promise 动态填充下拉列表。 I'm using Fluent-react Dropdown.
我正在使用 Fluent-react Dropdown。 getCustomer() loads values to const data.
getCustomer() 将值加载到 const 数据。 However, I can't see any values in the dropdown even though data is not null.
但是,即使数据不是 null,我也看不到下拉列表中的任何值。 Please help.
请帮忙。
Fluent Dropdown => https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown流畅的下拉菜单 => https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
Your optionsItems
need to be reactive.您的
optionsItems
需要是被动的。 Try using useState
-hook尝试使用
useState
-hook
export const LOV: React.FunctionComponent = () => {
const [optionItems, setOptionItems] = useState([]);
const loadCustomer = async () => {
const data = await getCustomer();
const options = [];
for (var i=0; i < data.value.length ; ++i)
{
options.push({
key: data.value[i].CustomerId,
text: data.value[i].CustomerName
});
}
setOptionItems(options)
}
useEffect(() => {
loadCustomer();
}, [])
return (
<SearchableDropdown options={optionItems}/>
);};
Please make sure your data.value[i].CustomerId
and data.value[i].CustomerName
are valid strings.请确保您的
data.value[i].CustomerId
和data.value[i].CustomerName
是有效的字符串。 You need to supply string, but it looks like your API call returns null there.您需要提供字符串,但看起来您的 API 调用在那里返回 null 。 After you fix this problem, together with Stutje's solution your app should start to work.
解决此问题后,与 Stutje 的解决方案一起,您的应用程序应该开始工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.