React应用调用S3 listObjectV2与headObject的显示及请求重复问题

问题概述 #

在学习React时，尝试通过AWS SDK的listObjectsV2方法获取S3桶文件列表，再调用headObject获取每个文件的自定义元数据user_metadata_1并更新数组。当前能获取基础文件数据，但页面无法展示包含user_metadata_1的更新后数组，同时存在两个问题：每个文件触发2次HEAD请求、listObjectV2请求重复发送。

问题分析 #

1. 异步操作未等待：headObject是异步回调API，原代码中getUserMetaData直接返回原数组时，元数据请求尚未完成，setListFiles拿到的数组没有user_metadata_1字段；后续元数据返回后直接修改原数组元素，未创建新数组，React无法检测到状态变化，不会触发重渲染。
2. 重复请求触发：开发环境下React严格模式会重复执行useEffect副作用函数，导致listObjectsV2请求两次；同时原代码中forEach循环的变量作用域问题可能重复触发请求。
3. 状态更新逻辑错误：直接修改数组元素的属性（aFile.user_metadata_1 = ...）属于原地修改，React状态依赖引用变化，这种方式无法触发组件重渲染。

修复后的代码 #

import React, { useState, useEffect, useRef } from "react";
import AWS from "aws-sdk";
import "./App.css";

function App() {
  // 初始化S3客户端
  const s3 = new AWS.S3({
    credentials: {
      accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
      secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
    },
    region: process.env.REACT_APP_AWS_REGION,
  });

  const params = { Bucket: "abc" };
  const [listFiles, setListFiles] = useState([]);
  const isLoaded = useRef(false); // 标记是否已加载过数据，避免严格模式重复请求

  // 获取单个文件的元数据
  const getFileMetadata = async (file) => {
    const headParams = { Bucket: "abc", Key: file.Key };
    try {
      const data = await s3.headObject(headParams).promise();
      // 返回新对象，避免修改原数据
      return {
        ...file,
        user_metadata_1: data.Metadata["user_metadata_1"] || "无元数据",
      };
    } catch (err) {
      console.error("获取元数据失败:", err);
      return { ...file, user_metadata_1: "获取失败" };
    }
  };

  useEffect(() => {
    // 严格模式下避免重复请求
    if (isLoaded.current) return;
    isLoaded.current = true;

    const fetchFilesWithMetadata = async () => {
      try {
        // 获取文件列表
        const listResponse = await s3.listObjectsV2(params).promise();
        // 并行请求所有文件的元数据
        const filesWithMetadata = await Promise.all(
          listResponse.Contents.map(getFileMetadata)
        );
        // 更新状态，触发重渲染
        setListFiles(filesWithMetadata);
      } catch (err) {
        console.error("获取文件列表失败:", err);
      }
    };

    fetchFilesWithMetadata();
  }, []);

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>user_metadata_1</th>
            <th>Document Name</th>
            <th>Size</th>
          </tr>
        </thead>
        <tbody>
          {listFiles.map((file, index) => (
            <tr key={file.Key || index}>
              <td>{file.user_metadata_1}</td>
              <td>{file.Key}</td>
              <td>{file.Size}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

关键修复点 #

• 异步流程优化：将AWS SDK的回调API转为Promise形式，用async/await和Promise.all并行处理所有元数据请求，确保所有数据就绪后再更新状态。
• 避免重复请求：使用useRef标记数据是否已加载，解决React严格模式下useEffect重复执行导致的请求重复问题。
• 正确状态更新：通过扩展运算符（...file）创建新对象，返回包含元数据的新数组，确保React能检测到状态变化并触发重渲染。
• 错误处理：为异步操作添加try/catch，统一处理请求失败情况，避免页面崩溃。

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