上传错误文件时Modal组件无法渲染的问题排查

嘿，我仔细看了你的代码，发现几个关键问题导致Modal组件没法正常显示，咱们一步步来修复：

1. 直接修改state数组，React没触发重渲染 #

你在checkFileType里直接用this.state.incorrectFiles.push(files[i])修改state，这可是React的大忌——直接修改state不会触发组件重新渲染，必须通过setState来更新数组：

// ❌ 错误写法：直接修改state
this.state.incorrectFiles.push(files[i]);

// ✅ 正确写法：通过setState更新，保持state不可变
this.setState(prevState => ({
  incorrectFiles: [...prevState.incorrectFiles, files[i]]
}));

2. MIME类型校验的导入错误 #

你把mimeType设成了文件路径字符串'src/mimeTypes.json'，这根本不是实际的MIME类型对象！得正确导入JSON文件里的内容：

// 修正导入（路径根据你的项目结构调整）
import mimeType from './mimeTypes.json';

假设你的mimeTypes.json是类似这样的结构（用来定义允许的视频MIME类型）：

{
  "video/mp4": true,
  "video/mov": true,
  "video/avi": true
}

3. Bootstrap模态框需要主动触发显示 #

你的Modal用了Bootstrap的fade类，这类模态框默认是隐藏的——哪怕组件已经渲染到DOM里，也得手动触发它才能显示。这里给你两种方案：

方案一：用React受控状态控制Modal（推荐，不用jQuery） #

给Modal组件加个visible属性，通过类名控制它的可见性，同时支持关闭功能：

// 修改后的ModalMessage组件
import React, {Component} from 'react';

class ModalMessage extends Component {
  render() {
    const { visible, incorrectFiles, onClose } = this.props;
    // 根据visible状态切换类名，控制显示/隐藏
    const modalClass = visible ? "modal fade show d-block" : "modal fade";
    const ariaHidden = visible ? "false" : "true";

    return (
      <div className={modalClass} id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden={ariaHidden}>
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">文件类型错误</h5>
              <button type="button" className="close" onClick={onClose}>
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              以下文件不符合要求（仅支持视频文件）：
              <ul className="mt-2">
                {incorrectFiles.map((file, index) => (
                  <li key={index}>{file.name} ({file.type || "未知类型"})</li>
                ))}
              </ul>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={onClose}>Close</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ModalMessage;

方案二：用jQuery触发Bootstrap模态框（如果项目已经引入jQuery） #

如果你的项目依赖jQuery和Bootstrap的JS，可以在setState的回调里触发模态框显示：

this.setState({ fileCheck: true }, () => {
  // 组件渲染完成后，调用Bootstrap的modal方法显示
  $('#exampleModal').modal('show');
});

4. 修复文件遍历的问题 #

for(let i in files)会遍历FileList对象的所有属性（包括一些非文件的内置属性），应该用for...of循环来遍历实际的文件：

checkFileType(files){
  let incorrectFiles = [];
  // 用for...of遍历FileList里的每个文件
  for(let file of files){
    // 这里也可以直接校验是否是video类型，不用依赖json：file.type.startsWith('video/')
    if(!mimeType.hasOwnProperty(file.type)){
      incorrectFiles.push(file);
    }
  }
  // 只有当有错误文件时才更新state
  if(incorrectFiles.length > 0){
    this.setState({ 
      fileCheck: true,
      incorrectFiles: incorrectFiles
    });
  }
}

修改后的完整FileUpload组件 #

import React, {Component} from 'react';
import ModalMessage from './ModalMessage';
// 正确导入MIME类型配置
import mimeType from './mimeTypes.json';

class FileUpload extends Component {
 constructor(props){
 super(props);
 this.getFileInfo = this.getFileInfo.bind(this);
 this.checkFileType = this.checkFileType.bind(this);
 this.closeModal = this.closeModal.bind(this);
 this.state = {
 fileCheck: false,
 incorrectFiles: []
 };
 }

 // 关闭Modal的方法
 closeModal() {
   this.setState({ fileCheck: false, incorrectFiles: [] });
 }

 checkFileType(files){
  let incorrectFiles = [];
  for(let file of files){
    if(!mimeType.hasOwnProperty(file.type)){
      incorrectFiles.push(file);
    }
  }
  if(incorrectFiles.length > 0){
    this.setState({ 
      fileCheck: true,
      incorrectFiles: incorrectFiles
    });
  }
 }

 getFileInfo(evnt) {
  // 直接从事件对象获取files，不用通过id查DOM，更符合React风格
  const files = evnt.target.files;
  this.checkFileType(files);
  
  for(let file of files){
    let reader = new FileReader();
    reader.onloadend = function(){
      console.log(`文件 ${file.name} 读取完成`);
      // 这里可以处理文件内容
    };
    reader.readAsArrayBuffer(file);
  }
 }

 render() {
  return (
   <div>
    <label className="btn btn-primary">
     File Upload
     <input type="file" onChange={this.getFileInfo} style={{display:"none"}} multiple/>
    </label>
    {this.state.fileCheck ? 
      <ModalMessage 
        visible={this.state.fileCheck} 
        incorrectFiles={this.state.incorrectFiles} 
        onClose={this.closeModal}
      /> : null}
   </div>
  );
 }
}

export default FileUpload;

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