如何基于API调用渲染下拉菜单？React下拉框不显示问题排查

你的代码核心问题是没有用React的状态管理跟踪数据变化，异步操作完成后更新了普通变量，但React不会感知到这些变化并重新渲染组件，所以下拉框始终显示初始的空内容。

具体问题点 #

1. 用普通变量contacts和contactDropdown存储数据与JSX，这类变量的更新不会触发React组件的重新渲染——React仅在状态（useState）或属性变化时才会重新执行组件、更新UI。
2. 立即执行的异步函数在组件初始化时运行，但它的执行结果无法通知React更新视图。

修正方案 #

改用React的useState管理联系人数据与加载状态，用useEffect处理异步逻辑（组件渲染后的异步操作属于副作用，适合放在useEffect中）：

import { useState, useEffect } from 'react';

const App = () => {
  // 用状态存储联系人数据和加载状态
  const [contacts, setContacts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        await Office.onReady();
        
        // 获取Graph访问令牌
        const graphTokenResponse = await graphAuth.getToken(graphLoginRequest);
        const microsoftGraphAccessToken = graphTokenResponse.accessToken;

        // 封装回调式的getMessage为Promise，确保await能等待数据返回
        const message = await new Promise((resolve) => {
          getMessage(microsoftGraphAccessToken, Office.context.mailbox.item.itemId, (data) => {
            resolve(data);
          });
        });

        // 获取联系人数据并更新状态
        const fetchedContacts = await getContactsByEmail(message.from.emailAddress.address);
        setContacts(fetchedContacts);
      } catch (error) {
        console.error('数据获取失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  // 根据状态渲染对应UI
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {contacts.length > 0 ? (
        <select>
          {contacts.map((contact) => (
            <option key={contact.id} value={contact.id}>
              {contact.name}
            </option>
          ))}
        </select>
      ) : (
        <div>无联系人数据</div>
      )}
    </div>
  );
};

关键修改说明 #

• 用useState声明contacts状态，调用setContacts更新数据时，React会自动触发组件重新渲染，更新下拉框内容。
• 用useEffect包裹异步逻辑，确保组件挂载后再执行数据获取操作，避免渲染过程中执行异步代码引发的问题。
• 增加isLoading状态，提供加载提示，避免初始状态下显示空内容。
• 对回调式的getMessage进行Promise封装，确保await能等待数据返回后再执行后续代码，避免message为空的问题。

内容的提问来源于stack exchange，提问作者tomtomdam