如何使用 promise 動態填充下拉選項

Question

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

Answer 1

您的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}/>    
);};

Answer 2

請確保您的data.value[i].CustomerId和data.value[i].CustomerName是有效的字符串。 您需要提供字符串，但看起來您的 API 調用在那里返回 null 。 解決此問題后，與 Stutje 的解決方案一起，您的應用程序應該開始工作。