如何在 React 中基于 API 调用动态渲染下拉菜单-js教程-PHP中文网

如何在 React 中基于 API 调用动态渲染下拉菜单

本文详解如何正确使用 React 的 useState 和 useEffect 实现基于异步 API 数据的下拉菜单渲染，避免因直接修改普通变量或在渲染体中执行副作用导致的不更新、重复请求和无限重渲染问题。

本文详解如何正确使用 react 的 `usestate` 和 `useeffect` 实现基于异步 api 数据的下拉菜单渲染，避免因直接修改普通变量或在渲染体中执行副作用导致的不更新、重复请求和无限重渲染问题。

在 React 中，组件的渲染行为完全由其状态（state）驱动，而非普通 JavaScript 变量。你当前代码中将 <select></select> 元素赋值给局部变量 contactDropdown，虽然数据成功获取，但该赋值操作不会触发组件重渲染——React 对此“视而不见”。

✅ 正确做法：用 `useState` 管理可变数据，用 `useEffect` 控制副作用

首先，将联系人列表（而非 JSX）存入状态，这是更清晰、更可维护的设计：

import { useState, useEffect } from 'react';

const App = () => {
  const [contacts, setContacts] = useState([]); // ✅ 存储原始数据，非 JSX
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchContacts = async () => {
      try {
        await Office.onReady();

        // 获取 Microsoft Graph 访问令牌
        const graphTokenResponse = await graphAuth.getToken(graphLoginRequest);
        const microsoftGraphAccessToken = graphTokenResponse.accessToken;

        // 获取当前邮件信息
        let message = null;
        await getMessage(microsoftGraphAccessToken, Office.context.mailbox.item.itemId, (data) => {
          message = data;
        });

        // 调用后端 API 查询联系人
        const contactsData = await getContactsByEmail(message.from.emailAddress.address);
        setContacts(contactsData);
      } catch (err) {
        setError(err.message || 'Failed to load contacts');
      } finally {
        setLoading(false);
      }
    };

    fetchContacts();
  }, []); // ? 空依赖数组确保仅在挂载时执行一次

  // 渲染逻辑：基于 state 动态生成 JSX
  return (
    <div>
      {loading && <p>Loading contacts...</p>}
      {error && <p style="{{" color:>Error: {error}</p>}
      {contacts.length > 0 ? (
        <select aria-label="Select a contact">
          {contacts.map((contact) => (
            <option key="{contact.id}" value="{contact.id}">
              {contact.name}
            </option>
          ))}
        </select>
      ) : (
        <p>No contacts found.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4115" title="React Flow Implementation"><img
														src="https://img.php.cn/upload/skill/000/000/081/178990749642712.jpg" alt="React Flow Implementation" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4115" title="React Flow Implementation" class="overflowclass">React Flow Implementation</a>
													<p class="overflowclass">使用 @xyflow/react正确实现 React Flow 节点式用户界面。适用于构建流程图、图表、可视化编辑器或节点式应用程序...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4115" title="React Flow Implementation" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      )}
    </div>
  );
};

export default App;

⚠️ 关键注意事项

不要在组件函数体顶层调用异步逻辑：否则每次渲染（包括状态更新后的重渲染）都会重新执行，极易引发无限循环或重复请求。
避免将 JSX 存入 state：虽然技术上可行（如 useState(<select>...</select>)），但会丧失对数据的控制力（例如无法复用 contacts 做搜索、排序或表单校验），也违背 React “数据驱动 UI” 的设计哲学。
务必处理加载与错误状态：真实场景中网络请求可能失败或延迟，良好的用户体验需显式反馈 loading 和 error。
useEffect 是副作用的唯一合规入口：API 调用、订阅、定时器等均应封装于此，并通过依赖数组精确控制执行时机。