为何Promise.then()返回的数据，组件接收时显示为Promise {<pending>}？

核心问题 #

getParsedFruit方法本身返回的就是Promise对象——哪怕你在then回调里返回了entries，整个方法的返回值依然是处于pending状态的Promise，而非最终的同步数据。

JavaScript中，只要函数内部包含异步操作（比如这里的farmAPI.fetchCrate是异步请求），函数的返回值必然是Promise：它不会等待异步操作完成再返回结果，而是直接返回一个未完成的Promise实例。

解决方案：用组件状态管理异步数据 #

类组件中，需要把异步获取的数据存到组件状态里，再将状态传递给子组件，这样子组件拿到的就是最终解析好的数据。

基础实现（仅首次挂载时请求）

class Produce extends React.Component {
  state = {
    fruitEntries: []
  };

  // 组件挂载完成后发起异步请求
  componentDidMount() {
    this.fetchAndParseFruit();
  }

  // 用async/await简化异步代码（也可以继续用then链式调用）
  fetchAndParseFruit = async () => {
    try {
      const apples = await farmAPI.fetchCrate('fruit');
      const { entries } = getParsedResponse(apples);
      // 更新状态，触发组件重新渲染
      this.setState({ fruitEntries: entries });
    } catch (error) {
      // 处理请求失败的情况
      console.error('获取水果数据失败:', error);
      this.setState({ fruitEntries: [] });
    }
  };

  render() {
    // 从state取数据传给Stand组件
    return <Stand items={this.state.fruitEntries} />;
  }
}

进阶实现（依赖props变化时重新请求）

如果需要根据props变化重新获取数据，可以配合componentDidUpdate：

class Produce extends React.Component {
  state = {
    fruitEntries: []
  };

  componentDidMount() {
    this.fetchAndParseFruit();
  }

  // 当依赖的props变化时，重新请求数据
  componentDidUpdate(prevProps) {
    if (prevProps.crateType !== this.props.crateType) {
      this.fetchAndParseFruit();
    }
  }

  fetchAndParseFruit = async () => {
    try {
      const apples = await farmAPI.fetchCrate(this.props.crateType || 'fruit');
      const { entries } = getParsedResponse(apples);
      this.setState({ fruitEntries: entries });
    } catch (error) {
      console.error('获取水果数据失败:', error);
      this.setState({ fruitEntries: [] });
    }
  };

  render() {
    return <Stand items={this.state.fruitEntries} />;
  }
}

额外修复：getParsedResponse的逻辑漏洞 #

你的getParsedResponse函数中，map回调里存在逻辑不完整的问题：当item.source存在时，你创建了source变量但没有返回，会导致这部分item变成undefined。建议修正：

export const getParsedResponse = (response?: { entries: Array<any> }) => {
  if (!response || !response.entries || !response.entries.length) {
    return { entries: [] };
  }

  const parsedData: Array<Object> = response.entries
    .map(item => {
      if (!item.source) {
        return null;
      }
      // 补充返回处理后的source对象
      return { ...item.source };
    })
    // 可选：过滤掉null值，避免子组件处理无效数据
    .filter(Boolean);

  return { entries: parsedData };
};

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