ReactJS文件上传日志异常求助：无法获取预期输出结果

嘿，我瞅了下你的代码，发现两个关键问题导致你看不到预期的日志输出，咱们一个个来解决：

1. setState是异步的，直接console.log拿不到最新状态 #

React的setState是异步批量更新的，你在调用setState之后立刻打印this.state.selectedFile，这时候状态还没完成更新，所以会输出null或者之前的值。

修正方法：用setState的第二个参数（回调函数），它会在状态更新完成后执行，这样就能拿到最新的selectedFile了：

fileChangedHandler = event => {
  this.setState({ selectedFile: event.target.files[0] }, () => {
    // 这里的回调会在state更新后触发
    console.log("选中的文件:", this.state.selectedFile);
  });
}

2. FormData的使用误区 #

你这里犯了两个小错误：

• formData.append()方法没有返回值，所以你把它赋值给fd的话，fd会是undefined，直接打印当然看不到内容；
• FormData是特殊的对象，直接console.log(formData)只能看到空的对象结构，没法直接看到里面的键值对。

修正方法：直接操作FormData实例，然后用entries()方法遍历查看内容：

uploadHandler = () => {
  const formData = new FormData();
  // 直接调用append，不需要赋值
  formData.append("data", this.state.selectedFile, this.state.selectedFile.name);
  
  // 正确查看FormData内容的方式
  console.log("FormData内容：");
  for (const [key, value] of formData.entries()) {
    console.log(`${key}:`, value);
  }
  
  // 也可以单独获取某个字段
  console.log("上传的文件:", formData.get("data"));
}

完整修正后的代码 #

class FileUpload extends React.Component {
  state = { selectedFile: null }

  fileChangedHandler = event => {
    this.setState({ selectedFile: event.target.files[0] }, () => {
      console.log("选中的文件:", this.state.selectedFile);
    });
  }

  uploadHandler = () => {
    const formData = new FormData();
    formData.append("data", this.state.selectedFile, this.state.selectedFile.name);
    
    console.log("FormData内容：");
    for (const [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.fileChangedHandler} />
        <button onClick={this.uploadHandler}>Upload!</button>
      </div>
    );
  }
}

这样修改之后，你就能在文件选中后看到正确的文件对象，点击上传按钮也能看到FormData里的内容啦～

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