如何从循环参数数据中使用函数返回数据承诺

Question

如何通过函数和参数数据循环在模板中返回此承诺数据？ 这是我的代码：

  let data = [
    {
      id: 1,
      model: "DIY-MULTI3-27HP230C"
    }
  ]

  const getByModelNo = async ({ id, params }: { id: string, params?: AxiosRequestConfig }) => {
    const options = {
      method: 'GET',
      url: `${prefix}/${id}`,
      params
    };
    let data: DataFromModel | any = {};
    try {
      const response = await axios.request(options);
      data = response?.data?.data
    } catch (error) {
      console.error('Error fetching configurator-post:', error);
    }
    return data;
  }
  )

我希望结果可以像这个例子一样返回：

  return(
   <div>
     {data.map((items, index) => (
        <div key={index}>{getByModelNo({id: items.model}).seriesName }</div>
       )
     )}
   </div>

Answer 1

要实现在 React 组件中返回 Promise 数据的所需功能，您需要正确处理 Promise 的异步特性。 React 的 render 方法不会等待 Promise 解析，这意味着您无法直接渲染异步操作的结果，例如从 render 方法本身内的 API 获取数据。相反，一旦数据可用，您应该使用 React 的状态来触发重新渲染。这是实现此目的的方法：

1. 使用

   useState

   和

   useEffect

   钩子：这些钩子允许您管理功能组件中的状态并执行副作用，例如获取数据。

2. 在

   useEffect

   中获取数据：在

   useEffect

   挂钩内执行 API 调用，以确保在组件安装时完成。获取数据后，更新状态，这将触发使用获取的数据重新渲染组件。

3. 渲染数据：使用获取的数据更新状态后，您可以对其进行映射并相应地渲染 UI 元素。

以下是实现方法：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const prefix = 'YOUR_API_ENDPOINT'; // Replace with your actual API endpoint

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await Promise.all(
        data.map(item =>
          getByModelNo({ id: item.model })
        )
      );
      setData(result);
    };

    fetchData();
  }, []); // Empty dependency array means this effect runs once on mount

  const getByModelNo = async ({ id, params }) => {
    const options = {
      method: 'GET',
      url: `${prefix}/${id}`,
      params,
    };

    try {
      const response = await axios.request(options);
      return response?.data?.data;
    } catch (error) {
      console.error('Error fetching data:', error);
      return {}; // Return an empty object or any suitable fallback
    }
  };

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item.seriesName}</div>
      ))}
    </div>
  );
};

export default DataFetcher;

解释：

• useState：用空数组初始化

  data

  状态变量。该状态将存储获取的数据。
• useEffect：包含立即调用的函数

  fetchData

  。此函数映射

  data

  数组（应包含您的初始数据集）并为每个项目调用

  getByModelNo

  。

  Promise.all

  用于等待所有promise解决，结果使用

  data

  存储在

  setData

  状态。
• getByModelNo：执行 API 请求并返回数据的异步函数。
• 渲染：组件映射到

  data

  状态以渲染其内容。每个项目的

  seriesName

  显示在

  div

  中。

此方法可确保您的组件正确等待异步数据被获取，然后相应地更新 UI。请记住将

'YOUR_API_ENDPOINT'

替换为您的实际 API 端点。