如何提取Promise对象的data部分作为props传递给React组件

问题原因 #

• 所有async函数执行后默认返回Promise对象，你在组件外部直接调用getAllTemplateTypes，拿到的optionItemsList本质是Promise实例，不是接口返回的真实数组数据，直接传给子组件当然无法调用map方法
• React组件渲染是同步执行的，首次渲染时接口请求还未完成，子组件拿到的是空值/Promise对象，自然会报templateTypes未定义的错误
• 你的代码里还存在组件名拼写错误：导入DropdownItems时写的是./DrowdownItems，漏了一个字母p，也会导致组件加载异常

修正后的代码 #

1. DropdownList.js #

import { useState, useEffect } from "react";
import DropdownButton from "react-bootstrap/DropdownButton";
import Dropdown from "react-bootstrap/Dropdown";
import Card from "react-bootstrap/Card";
// 修正拼写错误
import DropdownItems from "./DropdownItems";
import { getAllTemplateTypes } from "../AssetsActions/AssetsActions";

import styles from "../LeftPanelAssets.module.css";

function DropdownList() {
  const [value, setValue] = useState("");
  // 定义state存储下拉选项数据
  const [optionItemsList, setOptionItemsList] = useState([]);
  // 定义加载状态，避免渲染异常
  const [loading, setLoading] = useState(true);

  const changeValue = (e) => {
    setValue(e);
  };

  // 组件挂载后调用接口获取数据
  useEffect(() => {
    const fetchTypes = async () => {
      setLoading(true);
      const res = await getAllTemplateTypes();
      // 取返回结果里的templateTypes字段存入state，空值兜底
      setOptionItemsList(res?.templateTypes || []);
      setLoading(false);
    };
    fetchTypes();
  }, []);

  return (
    <div id="dropDownContainer">
      <Dropdown>
        <DropdownButton
          variant="outline-primary"
          id="dropdown-basic"
          title="Template Category"
          onSelect={changeValue}
        >
          <Dropdown.Menu>
            {/* 加载完成后再渲染子组件，避免空值报错 */}
            {!loading && <DropdownItems options={optionItemsList} />}
            {loading && <Dropdown.Item disabled>加载中...</Dropdown.Item>}
          </Dropdown.Menu>
        </DropdownButton>
      </Dropdown>
      <p />
      <Card text className={styles.borderlessTitleFont}>
        Category: {value}
      </Card>
      <p />
    </div>
  );
}

export default DropdownList;

2. DropdownItems.js 可选优化（增强空值兼容性） #

import ItemElement from "./ItemElement";

function DropdownItems(props) {
  const optionsList = props.options || [];
  const listItems = optionsList.map((opts) => (
    <ItemElement key={opts.id} data={opts}></ItemElement>
  ));

  return listItems;
}

export default DropdownItems;

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