React中如何处理用户取消文件选择时出现的undefined状态问题

核心问题根因 #

1. 清空逻辑错误：selectedFile初始值为undefined，清除时你将其设为空字符串，类型不匹配；且没有清空原生type=file输入框的选中值，导致后续选择操作异常。
2. 文件选择逻辑无兜底：用户点击文件选择框的「取消」按钮时，event.target.files[0]为undefined，你直接将其赋值给selectedFile同时把isFileSelected设为true，触发渲染时访问undefined.name报错。
3. 状态冗余：isFileSelected可以直接通过selectedFile是否存在判断，单独维护容易出现两个状态不同步的问题。

具体修复步骤 #

• 新增ref关联file输入框，用于手动清空原生DOM的文件选中记录
• 调整清除逻辑，将selectedFile重置为初始值null，同时清空input的value属性
• 优化文件选择逻辑，只有用户确实选中文件时才更新状态，取消选择时不做赋值
• 可选优化：删除冗余的isFileSelected状态，直接用selectedFile判断展示逻辑，同时用可选链?.访问文件名做兜底防护

修复后完整代码 #

import React, { useState, useRef } from "react";
import PropTypes from "prop-types";
import AddIcon from "@mui/icons-material/Add";
import { withStyles } from "@material-ui/core/styles";
import Fab from "@mui/material/Fab";

const styles = () => ({
  root: {
    boxSizing: "border-box",
    margin: "0",
    padding: "0"
  },
  textInput: {
    textAlign: "center"
  },
  test: {
    fontSize: "3rem"
  }
});

const CampaignForm = props => {
  const { classes } = props;
  const [selectedFile, setSelectedFile] = useState(null);
  // 新增ref关联文件输入框
  const fileInputRef = useRef(null);

  const handleClear = () => {
    setSelectedFile(null);
    // 手动清空原生input的文件值
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

  const handleFileSelection = event => {
    const file = event.target.files?.[0];
    // 只有真的选中文件才更新状态，取消选择时不处理
    if (file) {
      setSelectedFile(file);
    }
  };

  return (
    <div className={classes.root}>
      <h1 className={classes.textInput}>Text Campaign</h1>
      <div className={classes.textInput}>
        <label htmlFor='upload-csv'>
          <input
            ref={fileInputRef}
            style={{ display: "none" }}
            id='upload-csv'
            disabled={!!selectedFile}
            name='upload-csv'
            type='file'
            onChange={handleFileSelection}
          />
          <Fab
            color='primary'
            size='small'
            disabled={!!selectedFile}
            component='span'
            aria-label='add'
            variant='extended'>
            <AddIcon /> Add CSV
          </Fab>
        </label>
        <br />
        {selectedFile ? (
          <div>
            <br />
            <button onClick={handleClear}>clear</button>
            {/* 可选链兜底，避免极端情况报错 */}
            <p>{selectedFile?.name}</p>
          </div>
        ) : (
          <p>No file added</p>
        )}
      </div>
    </div>
  );
};
CampaignForm.propTypes = { classes: PropTypes.object.isRequired };
export default withStyles(styles)(CampaignForm);

额外说明 #

原来的handleClear里打印selectedFile.name会报错是因为React的状态更新是异步的，调用setSelectedFile后，当前作用域里的selectedFile还是更新前的旧值，如果你需要查看更新后的状态，可以在useEffect里监听selectedFile变化后再打印。

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