React自定义Hook如何传递点击时获取的文件名参数

问题核心是你当前的useProgress Hook在初始化时就要求传入文件名，但文件名只有点击按钮时才能获取。我们可以调整Hook的设计，让返回的进度启动函数接收文件名参数，而不是在Hook初始化时传入。

修改useProgress Hook #

调整Hook逻辑，让返回的handleProgress函数接受name参数，同时每次启动进度时重置进度的起始值，避免多个文件之间的状态干扰：

import { useRef } from "react";

const useProgress = (updater, initialProgress) => {
  const mockRef = useRef(initialProgress);

  const handleProgress = (name) => {
    // 每次启动进度前重置初始值
    mockRef.current = initialProgress;
    const intervalID = setInterval(() => {
      if (mockRef.current >= 100) {
        clearInterval(intervalID);
        updater((prevState) =>
          prevState.map((item) =>
            item.name === name ? { ...item, status: 100 } : item
          )
        );
      } else {
        mockRef.current += 10;
        updater((prevState) =>
          prevState.map((item) =>
            item.name === name ? { ...item, status: mockRef.current } : item
          )
        );
      }
    }, 200);
  };

  return handleProgress;
};

export default useProgress;

修改父组件App #

在父组件中，调用initiateProgress时直接传入点击的文件名即可：

import React, { useState } from "react";
import "./styles.css";
import ProgressBar from "./ProgressBar";
import useProgress from "./useProgress";

const appStyles = {
  height: 20,
  width: 500,
  margin: 50
};

export default function App() {
  const [files, setFiles] = useState([
    { name: "file1", status: 0 },
    { name: "file2", status: 0 },
    { name: "file3", status: 0 }
  ]);

  // 初始化Hook时只传入setter和初始进度
  const initiateProgress = useProgress(setFiles, 60);

  const initiate = (name) => {
    // 调用进度启动函数时传入文件名
    initiateProgress(name);
  };

  return (
    <div className="App" style={appStyles}>
      {files.map((file) => {
        return (
          <div key={file.name}>
            <button type="button" onClick={() => initiate(file.name)}>
              {file.name}
            </button>
            <ProgressBar bgColor={"#DF8100"} progress={file.status} />
            {file.status === 100 && <span>Upload complete</span>}
          </div>
        );
      })}
    </div>
  );
}

关键改动说明 #

• 把文件名参数从Hook的初始化参数移到返回函数的参数中，这样就能在点击按钮时动态传递。
• 每次调用handleProgress时重置mockRef.current为初始进度，确保每个文件的进度都是从60开始递增，不会因为之前的文件进度影响当前文件。

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