嵌套for-of循环中执行Fetch请求的实现方案咨询

你的核心问题在于React渲染的同步特性和异步Fetch请求的冲突——当前代码在buildListFromArray里直接做异步Fetch，然后往output数组push元素，但React渲染是同步完成的，等Fetch请求返回时，组件已经渲染完毕，这些后续push的元素不会触发UI更新，所以最终看不到期望的name值。下面是几个可行的解决方向：

1. 把异步数据获取移到组件状态管理中 #

React是状态驱动的，所有需要动态更新的内容都应该依托状态来触发重新渲染。你可以：

• 在外层组件（也就是调用buildListFromArray的地方），先收集所有需要Fetch的URL，批量获取数据后再生成JSX：
  • 遍历传入的value数组，对每个元素判断是否是目标URL：
    • 如果是，创建一个Fetch的Promise，请求成功后返回对应的jsonObj.results[0].name；
    • 如果不是，直接返回原元素。
  • 用Promise.all等待所有请求完成，得到处理后的数组，把这个数组存在组件的状态里（比如用useState）。
  • 当状态更新后，再把处理后的数组传给buildListFromArray，此时这个函数只需要同步生成静态的JSX列表即可，不需要处理异步逻辑。

2. 在buildListFromArray对应的组件内处理异步逻辑 #

如果buildListFromArray是某个组件内部的函数，你可以把它改成独立组件，内部用状态管理数据：

• 新建一个ListFromArray组件，接收listArray和clickFunction作为props。
• 在组件内用useState定义三个状态：processedList（存储处理后的列表数据）、isLoading（标记是否在加载）、error（存储错误信息）。
• 用useEffect监听listArray的变化，当数组更新时，执行批量Fetch操作：

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const promises = listArray.map(item => {
          if (item.includes('https://swapi.co/api/')) {
            return fetch(item)
              .then(res => res.json())
              .then(json => json.results[0].name);
          }
          return Promise.resolve(item);
        });
        const processed = await Promise.all(promises);
        setProcessedList(processed);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [listArray]);
  

• 然后在组件的渲染部分，根据isLoading、error和processedList来渲染对应的内容：加载时显示加载提示，出错时显示错误信息，正常情况下用processedList生成<ul>和<li>。

3. 为什么不能直接在渲染函数里做异步操作？ #

• React的渲染流程是同步的，渲染函数执行时会生成虚拟DOM，此时异步请求还没完成，output数组里没有异步获取的内容，所以初次渲染的列表是空的或者只有非URL元素。
• 当Fetch请求完成后，你往output数组里push元素，但这个数组不是React状态的一部分，不会触发组件重新渲染，所以UI不会更新。
• 另外，每次组件重新渲染时，buildListFromArray都会被重新执行，导致重复发起Fetch请求，造成不必要的网络开销和性能问题。

4. 额外优化点 #

• 可以给Fetch请求加上缓存，避免重复请求同一个URL，比如用一个全局的Map存储已经请求过的URL和对应的name值，下次遇到相同URL直接用缓存值。
• 处理单个请求失败的情况：比如某个URL请求失败，可以返回原URL或者错误提示，而不是让整个Promise.all失败（可以在每个Fetch的catch里返回兜底值）。

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