Outlook加载项中如何基于API调用渲染下拉菜单？

问题分析 #

基础示例代码的问题 #

• 用普通变量contactDropdown存储JSX，修改后不会触发React重新渲染。React只有状态（useState）或属性变化时才会更新UI，普通变量的变更无法被框架感知。
• 顶层立即执行的async函数会在组件首次渲染后执行，但此时组件已经返回了初始的空JSX，后续修改变量不会触发重新渲染。

useEffect+useState代码的问题 #

• getContacts是异步函数，直接调用setContacts(getContacts())会把Promise对象存入状态，而非实际的联系人数据，因为异步函数默认返回Promise。
• 缺少Office.onReady()的等待逻辑，Outlook加载项必须等待Office初始化完成后才能调用相关API，否则可能导致API调用失败或无响应。

正确实现代码 #

import { useState, useEffect } from 'react';

const App = () => {
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    // 封装异步逻辑到单独函数中
    const fetchContacts = async () => {
      // 等待Office初始化完成
      await Office.onReady();
      try {
        const fetchedContacts = await getContacts();
        setContacts(fetchedContacts);
      } catch (error) {
        console.error('获取联系人失败:', error);
      }
    };

    fetchContacts();
  }, []);

  // 模拟API调用的getContacts函数
  const getContacts = async () => {
    // 替换为实际的API调用逻辑
    return [
      { value: 1, text: "Tim" },
      { value: 2, text: "Fred" }
    ];
  };

  // 构建下拉菜单
  const buildDropdown = () => {
    return (
      <div>
        <label>Choose a Contact</label>
        <select>
          {contacts.map((option) => (
            <option key={option.value} value={option.value}>
              {option.text}
            </option>
          ))}
        </select>
      </div>
    );
  };

  return (
    <div>
      {buildDropdown()}
    </div>
  );
};

export default App;

关键修复点 #

• 使用useState维护联系人数据状态，当调用setContacts更新状态时，React会自动触发组件重新渲染，更新下拉菜单。
• 在useEffect中封装异步逻辑，先等待Office.onReady()完成，再调用getContacts并等待结果，最后更新状态。
• 用try/catch捕获API调用可能出现的错误，方便调试。

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