文件输入在 React 中丢失上传处理函数

Question

我有一个带有文件输入的简单表单和一个带有错误标志的状态。如果用户尝试在没有文件的情况下提交表单，错误标志将设置为 true。之后，错误组件中的 useEffect 会触发超时，3 秒后会将错误标志设置为 false。如果用户在错误标志变为假之前打开下载窗口，则下载功能不再起作用。

我的主页组件：

const Home = () => {
  const [file, setFile] = useState<File | null>(null)
  const [error, setError] = useState<boolean>(false)

  const onUploadFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setFile(event.target.files?.[0] || null)
  }, [])

  const onSubmit = (event: FormEvent) => {
    event.preventDefault()
    if (!file) {
      setError(true)
      return
    }
    console.log(file.name)
  }

  return (
    <div className="container">
      <form onSubmit={onSubmit} className="form">
        <input type={'file'} accept={'.txt,.zip,.csv,.xlsx'} onChange={onUploadFile}/>
        {file && <p>{file.name}</p>}
        <button type={'submit'}>Submit</button>
      </form>
      {error && <Error message={'Error'} close={setError}/>}
    </div>
  )
}

我的错误组件：

interface ErrorProps {
    message: string
    close: Dispatch<SetStateAction<boolean>>
}

const Error:FC<ErrorProps> = ({message, close}) => {

  useEffect(() => {
    const timerId = setTimeout(() => close(false), 3000)

    return () => {
      clearTimeout(timerId)
    }
  }, [])
  return (
    <div className="error">
      <p>{message}</p>
      <p style={{cursor: "pointer"}} onClick={() => close(false)}>&times;</p>
    </div>
  )
}

我猜想当上传窗口打开并且超时调用 setState 函数时，Home 组件被重新渲染并重新创建上传函数，但是输入标签保存了一个指向 previos 函数的指针。我试图在 useCallback 中传递上传功能，希望对该功能的引用是永久的，但它不起作用。我能做什么？