React文件上传输入框处理函数因组件重渲染失效问题求助

你的问题根源在于错误提示组件的定时器逻辑与组件挂载生命周期绑定，当用户打开文件选择窗口期间，定时器触发错误状态变更导致组件重渲染，与浏览器的文件选择对话框交互产生冲突，最终导致 onChange 事件失效。

修复方案：将定时器逻辑移至状态拥有组件（Home） #

把自动关闭错误的定时器逻辑从 Error 组件移到 Home 组件中，由错误状态的拥有者直接控制状态变化，避免组件挂载/卸载带来的意外交互问题。

修改后的 Home 组件代码：

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)
  }

  // 控制错误自动关闭的定时器逻辑
  useEffect(() => {
    let timerId: NodeJS.Timeout | undefined;
    if (error) {
      timerId = setTimeout(() => setError(false), 3000)
    }
    // 组件卸载或error状态变化时清理定时器
    return () => timerId && clearTimeout(timerId)
  }, [error])

  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>
  )
}

修改后的 Error 组件代码：

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

const Error:FC<ErrorProps> = ({message, close}) => {
  return (
    <div className="error">
      <p>{message}</p>
      <p style={{cursor: "pointer"}} onClick={() => close(false)}>&times;</p>
    </div>
  )
}

为什么这样修复？ #

1. 状态逻辑集中管理：错误状态由 Home 组件拥有，定时器逻辑与状态直接绑定，避免跨组件的生命周期冲突。
2. 避免不必要的组件交互：Error 组件只负责显示和手动关闭错误，不再处理定时器逻辑，减少与文件选择窗口的意外交互。
3. 定时器清理更可靠：当 error 状态变化（比如用户手动关闭错误）时，会自动清理旧定时器，避免内存泄漏或重复触发状态变更。

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