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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-06

浏览次数：次

返回列表

在 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 对象中，并返回。

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

UXbot

AI产品设计工具

185 查看详情 UXbot

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() 确保异步操作完成。

注意事项

错误处理: 在实际应用中，应该添加错误处理机制，例如使用 try...catch 块来捕获 API 请求可能发生的错误。
缓存失效: 可以考虑添加缓存失效机制，例如设置一个缓存时间，定期从 API 重新获取数据。
数据更新: 如果 API 数据会发生变化，需要考虑如何更新缓存。例如，可以添加一个 "刷新" 按钮，点击后强制从 API 重新获取数据。

总结

通过使用 useRef 结合 async/await，我们可以在 React 函数组件中有效地缓存 API 数据，避免不必要的 API 调用，提升应用性能。关键在于确保在访问 useRef 对象之前，API 请求已经完成，并且正确处理可能出现的错误。

以上就是在 React 中将 Promise 成功解析后的值赋给可变 ref 对象的详细内容，更多请关注其它相关文章！

# ai # 加载 # 这是一个 # react # 并在 # 寿光网络营销推广介绍 # 微商怎么推广营销tt吧技精 # 网站内部应该如何优化 # 凌海网站运营推广 # 剪映电商模版营销推广 # 黑龙江网站推广优化 # seo综合相信 # SEO竞价排名名词解释 # 广告视频网站新片场推广 # 随机数 # 有何不同 # 是一个 # 如何实现 # 服务端 # 有效地 # 自定义 # 安阳营销网站推广工具

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：Webkit浏览器自动填充样式定制指南

下一篇：D3.js 动态调整节点文本字体大小

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

使用 useRef 缓存 API 数据

注意事项

总结