使用异步函数的值

Question

我在 React 的功能组件中使用异步函数时遇到了一些问题。 我有一个需要渲染一些数字的功能组件。

函数getNumber ：对于每个id，执行 API 调用以检索一个数字（与特定 id 相关联）。 函数createArray从 ID 数组 ( idArray ) 中创建这些数字的数组。

问题是，该功能（分量）访问值返回createArray() [0]我也得到连接错误，因为该类型是一个承诺（回报不等待异步函数）。

什么是最好的解决方案？

 const getNumber = async (id: String) => {
    const numberFromApi = await getNumberFromApi(id); //returns an object
    return numberFromApi.num; //taking the num value out of the object
  };

const createArray = async () => {
    const arrayOfNumbers= await Promise.all(
      idArray.map(id => getNumber (id))
    );
    return arrayOfNumbers;
   }


return(
       <div>{createArray()[0]} </div>)

Answer 1

您真正能做的就是从组件的状态中读取值，并在承诺解决时设置状态：

const [theValue, setTheValue] = useState(0); // or some other initial value, you choose what's best for your component

const getNumber = async (id: String) => {
   const numberFromApi = await getNumberFromApi(id); //returns an object
   return numberFromApi.num; //taking the num value out of the object
};

const createArray = async () => {
    const arrayOfNumbers= await Promise.all(
      idArray.map(id => getNumber (id))
    );
    return arrayOfNumbers;
}

useEffect(async () => {
    const array = await createArray();
    setTheValue(array[0]);
}, []);

return(
   <div>{theValue} </div>
)

在等待 Promise 解决时，您可能希望更改组件以显示某种加载指示器。

Answer 2

您需要创建一些可以在承诺返回时更新的状态：

// your state
const [data, setData] = useState(false);

const getNumber = async (id: String) => {
    const numberFromApi = await getNumberFromApi(id); //returns an object
    return numberFromApi.num; //taking the num value out of the object
  };

const createArray = () => {
  Promise.all(
    idArray.map(id => getNumber (id))
  ).then( 
    // use setData to set whatever you want displayed
  );
}

// you render your data (or nothing if there is none)
return(<div>{data} </div>)