![](/img/trans.png)
[英]How to dynamically populate options on dropdown lists based on selection in another dropdown?
[英]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}/>
);};
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;
}
我正在尝试使用 promise 动态填充下拉列表。 我正在使用 Fluent-react Dropdown。 getCustomer() 将值加载到 const 数据。 但是,即使数据不是 null,我也看不到下拉列表中的任何值。 请帮忙。
流畅的下拉菜单 => https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
您的optionsItems
需要是被动的。 尝试使用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}/>
);};
请确保您的data.value[i].CustomerId
和data.value[i].CustomerName
是有效的字符串。 您需要提供字符串,但看起来您的 API 调用在那里返回 null 。 解决此问题后,与 Stutje 的解决方案一起,您的应用程序应该开始工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.