如何处理异步代码并将处理后的数据传递为组件Props？

开发场景与伪代码逻辑 #

我正在开发一个React应用，其中有一个组件负责处理大量数据转换，伪代码逻辑如下：

function ({ API_DATA }) {
  let dataHandoff1 = []

  const mutateData = async () => {
    // 对API_DATA执行过滤、映射等转换操作
    dataHandoff1.push(转换后的结果)
  }

  const mutateData2 = async () => {
    // 基于dataHandoff1执行另一次转换
    dataHandoff2.push(dataHandoff1)
  }

  const forceFunctionsToRunOneAfterTheOther = async () => {
    const a = await mutateData()
    const result = await mutateData2()
    const finished = result
    console.log(finished) // 这里能输出预期的正确数据
    return finished 
  }    

  const finalData = useMemo(() => forceFunctionsToRunOneAfterTheOther(), []);

  return (
    <ChildComponent finalData={finalData} />
  )
}

开发目标 #

• 保证数据转换函数按顺序执行，因为每一步都依赖前一步的结果，所以使用异步函数
• 转换完成后的最终数据要在组件渲染间持久化，不想用useEffect（会触发重渲染导致重复计算），因此选择useMemo做缓存

遇到的问题 #

1. 开发者工具中finalData始终是Promise对象，尽管forceFunctionsToRunOneAfterTheOther内部的console.log能输出正确结果。最初考虑用useEffect执行该函数，但需要配合useState存储结果，这会触发重渲染导致重复计算，不知道该怎么调整逻辑。
2. 尝试把转换后的最终数据作为Props传给子组件，技术上可行，但Props为空，应用也检测不到Props变化。试过条件渲染子组件，也没有效果。

完整代码示例 #

import React from 'react';
import TopSongsList from './TopSongsList';
import { useEffect, useState, useMemo } from 'react';

function TopSongs({ songList }) {
  const [readyToRender, setReadyToRender] = useState();

  const fullSongList = []
  const songArray = []
  const songFineDetails = []
  let removedSongDetailsDuplicates = []
  let top100Songs 

  const getSongs = async () => {
    for (let i = 0; i < songList.length; i++) {
      fullSongList.push(songList[i].data.items);
      return fullSongList
    }
  }

  const getSongs2 = async () => {
    for(let j = 0; j < fullSongList.length; j++) {
      fullSongList[j].forEach(songs => songArray.push(songs));
      return songArray
    }
  }

  const getSongs3 = async () => {
    for (let k = 0; k < songArray.length; k++) {
      const {artists, external_urls, id, name, popularity } = songArray[k].track;
      songFineDetails.push({
        "artists": artists,
        "external_urls": external_urls, 
        "id": id, 
        "name": name, 
        "popularity": popularity
      });
    }
    return songFineDetails
  }
  
  const getSongs4 = async () => {
    removedSongDetailsDuplicates = [...new Map(songFineDetails.map(v => [v.id, v])).values()];
    removedSongDetailsDuplicates.sort((a, b) => b.popularity - a.popularity);
    top100Songs = removedSongDetailsDuplicates.splice(0, 100);
    return top100Songs
  }

  const finishedSongs = async () => {
    const a = await getSongs(); 
    const b = await getSongs2(); 
    const c = await getSongs3(); 
    const finished = await getSongs4();
    setReadyToRender(1)
    return finished
  }

  const songData = useMemo(() => finishedSongs(), []);

  return (
    <div>
      {readyToRender > 0 && <h1><TopSongsList songData={songData}/></h1>}
    </div>
  )
}

export default TopSongs

问题分析与解决方案 #

核心问题拆解 #

1. useMemo返回Promise：异步函数默认返回Promise，所以useMemo的回调如果是异步函数，结果必然是Promise，而非最终数据。
2. 临时变量的闭包污染：你的临时变量（fullSongList、songArray等）定义在组件顶层，会被闭包捕获旧值，导致数据处理逻辑出错。
3. 条件渲染时机错误：readyToRender的更新和异步处理的完成时机没有绑定，可能导致子组件提前渲染，此时songData还是未完成的Promise。

修改后的代码 #

import React, { useState, useMemo, useEffect } from 'react';
import TopSongsList from './TopSongsList';

function TopSongs({ songList }) {
  // 存储最终处理完成的数据
  const [topSongsData, setTopSongsData] = useState(null);

  // 用useMemo缓存数据处理的Promise，仅当songList变化时重新执行
  const songsProcessingPromise = useMemo(() => {
    // 把所有临时变量放在函数内部，避免闭包污染
    async function processSongs() {
      const fullSongList = [];
      const songArray = [];
      const songFineDetails = [];

      // 步骤1：收集所有歌曲项
      for (let i = 0; i < songList.length; i++) {
        fullSongList.push(songList[i].data.items);
      }

      // 步骤2：扁平化歌曲列表
      fullSongList.forEach(list => {
        songArray.push(...list);
      });

      // 步骤3：提取需要的字段
      songArray.forEach(item => {
        const { artists, external_urls, id, name, popularity } = item.track;
        songFineDetails.push({
          artists,
          external_urls,
          id,
          name,
          popularity
        });
      });

      // 步骤4：去重、排序、取前100
      const uniqueSongs = [...new Map(songFineDetails.map(v => [v.id, v])).values()];
      uniqueSongs.sort((a, b) => b.popularity - a.popularity);
      return uniqueSongs.slice(0, 100); // 用slice代替splice，避免修改原数组
    }

    return processSongs();
  }, [songList]);

  // 监听Promise完成，更新状态
  useEffect(() => {
    songsProcessingPromise
      .then(result => setTopSongsData(result))
      .catch(err => console.error('歌曲数据处理失败:', err));
  }, [songsProcessingPromise]);

  // 仅当数据准备好时渲染子组件
  return (
    <div>
      {topSongsData && (
        <h1>
          <TopSongsList songData={topSongsData} />
        </h1>
      )}
    </div>
  );
}

export default TopSongs;

关键优化点 #

1. 临时变量私有化：将所有临时数据处理变量放在processSongs内部，避免组件顶层变量的闭包污染，确保每次处理都是基于最新的songList。
2. useMemo缓存Promise：确保只有songList变化时才重新执行数据处理逻辑，完全避免不必要的重复计算。
3. 状态存储最终结果：用useState存储处理完成的数据，通过useEffect监听Promise的resolved状态更新状态，仅触发一次重渲染（数据准备完成时），这是展示数据的必要重渲染，无法避免但不会重复计算。
4. 简化同步逻辑：你的数据处理步骤都是同步操作（无异步API调用），不需要拆分成多个异步函数，合并后逻辑更清晰，减少不必要的await。
5. 修正数组操作：用slice代替splice，避免修改原数组，符合函数式编程的immutable原则。
6. 精准条件渲染：直接用topSongsData作为渲染条件，确保子组件只有在数据完全准备好时才接收Props，避免传递Promise或空值。

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