React+TypeScript中同组件渲染时props值被覆盖问题求助

你遇到的问题核心是多个相同组件的文件输入框（file input）存在DOM标识冲突，导致文件选择后的回调逻辑错误绑定到了第一个组件的props上。

为什么会出现这种情况？ #

• 如果你在UploadOnePhoto组件内部给file input用了固定id（比如id="upload-input"），或者通过全局DOM选择器（比如document.querySelector('input[type="file"]')）获取输入框，那么当渲染两个组件时：
  • 第二个组件的input会和第一个的id重复，浏览器只会识别第一个匹配的元素；
  • 点击第二个组件的上传按钮时，实际触发的是第一个input的change事件，而第一个组件的type是PROFILE，所以回调里拿到的type就变成了PROFILE。
• 而组件底部的Typography直接使用props.type渲染，属于React的声明式渲染，所以始终能正确显示对应类型。

修复方案 #

给每个组件的file input生成唯一标识，并通过组件内的useRef绑定当前输入框，避免全局DOM操作：

修改后的UploadOnePhoto组件示例

import { useState, useRef } from 'react';
import { Button, Typography, Box } from '@mui/material';
import { PhotoType } from './your-enum-path';

interface UploadOnePhotoProps {
  type: PhotoType;
  onSubmit: (type: PhotoType, file: File) => void;
}

export const UploadOnePhoto = ({ type, onSubmit }: UploadOnePhotoProps) => {
  // 用useRef绑定当前组件的file input
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleUploadClick = () => {
    console.log('open file dialog:', type);
    fileInputRef.current?.click();
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      console.log('change file:', type);
      setSelectedFile(file);
      // 直接使用当前组件的props.type传递给回调
      onSubmit(type, file);
    }
  };

  return (
    <Box textAlign="center">
      <Button variant="contained" onClick={handleUploadClick}>
        上传{type === PhotoType.PROFILE ? '头像' : 'LOGO'}
      </Button>
      {/* 基于props.type生成唯一id */}
      <input
        type="file"
        ref={fileInputRef}
        id={`upload-input-${type}`}
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />
      <Typography variant="body2" mt={1}>
        当前类型：{type}
      </Typography>
    </Box>
  );
};

关键修复点 #

1. 唯一标识：通过id={upload-input-${type}}给每个file input生成唯一id，避免DOM冲突；
2. 组件内绑定：用useRef绑定当前组件的file input，代替全局DOM查找（比如document.getElementById）；
3. 直接使用props.type：在handleFileChange中直接使用组件的props.type，不需要额外存到state或ref里（因为props是组件专属的，不会和其他组件混淆）。

这样修改后，两个组件的file input会独立触发各自的change事件，回调里的type也会和组件传入的一致。

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