在 React 中将 Promise 成功解析后的值赋给可变 ref 对象-js教程-PHP中文网

在 React 中将 Promise 成功解析后的值赋给可变 ref 对象

DDD

发布： 2025-10-06 12:40:30

原创

323人浏览过

在 react 中将 promise 成功解析后的值赋给可变 ref 对象

本文旨在解决在 React 函数组件中使用 useRef 存储异步 API 请求结果，并避免每次渲染都重新发起请求的问题。我们将探讨如何利用 useRef 结合 async/await，有效地缓存 API 数据，提升应用性能，并提供详细的代码示例和注意事项。

在 React 应用中，我们经常需要从 API 获取数据并在组件中使用。为了避免不必要的 API 调用，我们希望在组件的生命周期内缓存 API 响应。useRef hook 提供了一种在组件重新渲染之间保持可变值的方式，非常适合用来缓存数据。然而，直接将 Promise 的结果赋值给 useRef 对象可能不会立即生效，导致访问到未更新的值。本文将介绍如何正确地使用 useRef 结合 async/await 来解决这个问题。

使用 useRef 缓存 API 数据

核心思路是创建一个函数，该函数首先检查 useRef 对象是否已经包含缓存的数据。如果存在，则直接返回缓存的数据；否则，调用 API 获取数据，将其存储到 useRef 对象中，并返回。

以下是一个具体的实现示例：

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

查看详情

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

// 假设的 API 请求函数
async function getMoviesRequest() {
  // 模拟 API 请求延迟
  await new Promise(resolve => setTimeout(resolve, 500));
  // 模拟返回电影数据
  return [
    { title: "Movie 1" },
    { title: "Movie 2" },
    { title: "Movie 3" },
    { title: "Movie 4" },
    { title: "Movie 5" },
    { title: "Movie 6" },
    { title: "Movie 7" },
    { title: "Movie 8" },
    { title: "Movie 9" },
    { title: "Movie 10" }
  ];
}

// 随机数生成函数
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

export default function Page() {
  const cachedMoviesFromApi = useRef(null); // 初始化为 null
  const [movie, setMovie] = useState({ title: "" });

  useEffect(() => {
    setNewMovie().then(); // 确保在组件挂载后立即获取电影数据
  }, []);

  async function getMoviesFromCacheOrApi() {
    if (cachedMoviesFromApi.current) {
      console.log("从缓存中获取电影");
      return cachedMoviesFromApi.current;
    }

    console.log("从 API 获取电影");
    const moviesFromApi = await getMoviesRequest();
    cachedMoviesFromApi.current = moviesFromApi;

    return moviesFromApi;
  }

  async function setNewMovie() {
    const movies = await getMoviesFromCacheOrApi();
    const randomIndex = getRandomInt(9);
    const movie = movies[randomIndex];

    setMovie(movie);
  }

  return (
    <div>
      <h3>{movie.title}</h3>
      <button onClick={setNewMovie}>Generate New Movie</button>
    </div>
  );
}

登录后复制

代码解释：

cachedMoviesFromApi: 使用 useRef(null) 创建一个 ref 对象，用于存储从 API 获取的电影数据。初始值为 null，表示尚未从 API 获取数据。
getMoviesFromCacheOrApi: 这是一个异步函数，负责从缓存或 API 获取电影数据。
- 首先检查 cachedMoviesFromApi.current 是否有值。如果有，则直接返回缓存的数据。
- 如果缓存中没有数据，则调用 getMoviesRequest 函数从 API 获取数据。
- 将获取到的数据赋值给 cachedMoviesFromApi.current，以便下次使用。
- 最后返回从 API 获取的数据。
setNewMovie: 这是一个异步函数，负责设置新的电影。
- 调用 getMoviesFromCacheOrApi 函数获取电影数据（从缓存或 API）。
- 随机选择一个电影。
- 使用 setMovie 函数更新 movie state。
useEffect: 在组件挂载后，调用 setNewMovie 函数，确保在组件加载时获取初始电影数据。

关键点：

async/await: 使用 async/await 确保 API 请求完成后再执行后续操作，避免访问到未定义的 movies 值。
null 初始化: cachedMoviesFromApi 初始化为 null，可以明确区分 "尚未加载" 和 "已加载，但数据为空" 的情况。如果API可能返回空数组，则需要根据实际情况选择合适的初始值。
useEffect: 在 useEffect 中调用 setNewMovie().then() 确保异步操作完成。