如何获取MongoDB查询结果填充React的select下拉选择菜单

问题根因 #

你遇到的问题和线程并发无关，是异步请求执行逻辑和React状态管理的常见问题，核心原因有3个：

• axios.get是异步网络请求，不会阻塞后续代码执行，你调用axiosTest之后立刻打印type时，请求还没收到服务端返回，自然拿不到数据
• 你定义的axiosTest函数没有写返回语句，就算等待异步执行完成，调用函数也拿不到返回值
• React中普通变量的变更不会触发组件重新渲染，就算后续你拿到数据赋值给type，页面也不会自动更新渲染下拉选项

修复后的代码 #

import * as React from "react";
import { useState, useEffect } from "react";
import axios from "axios";
  
const Locations = () => {
  // 用state存储省份列表，状态变更会触发组件重新渲染
  const [provinces, setProvinces] = useState([]);
  // 可选：增加加载状态优化体验
  const [loading, setLoading] = useState(true);

  // 组件首次挂载时执行请求，避免重复触发
  useEffect(() => {
    const fetchProvinces = async () => {
      try {
        const res = await axios.get("/api/v2/people/provinces");
        // 请求成功更新省份状态
        setProvinces(res.data);
      } catch (err) {
        console.error("获取省份列表失败:", err);
      } finally {
        setLoading(false);
      }
    };
    fetchProvinces();
  }, []); // 空依赖数组代表仅在组件首次挂载后执行一次

  return (
    <div
      style={{
        padding: "16px",
        margin: "16px",
      }}
    >
      <form>
        <div>
          <select>
            {loading ? (
              <option value="" disabled>加载中...</option>
            ) : (
              provinces.map(el => <option key={el} value={el}>{el}</option>)
            )}
          </select>
        </div>
      </form>
    </div>
  );
};
  
export default Locations;

改动说明 #

1. 引入useState管理省份列表和加载状态，状态更新会触发组件重新渲染，自动同步页面展示
2. 引入useEffect控制请求触发时机，仅在组件首次挂载后发起一次请求，避免组件重渲染时重复发请求
3. 用async/await写法简化异步请求逻辑，请求成功后调用setProvinces更新状态即可自动渲染下拉选项
4. 可选增加加载状态，避免网络较慢时下拉框完全空白的体验问题

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