ReactJS图片上传报错：Uncaught TypeError: Cannot read property 'props' of undefined

Hey there! I can see exactly what's causing your error here. When you pass this.handleFileUpload directly to the input's onChange event, the this inside that function doesn't point to your component instance—so this.props ends up being undefined, which is why calling uploadDocumentRequest throws an error.

Let's go through three simple fixes to resolve this:

1. Bind this in the Constructor #

This is the classic approach to ensure this stays tied to your component:

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class File extends Component {
  constructor(props) {
    super(props);
    // Bind the handler to the component instance
    this.handleFileUpload = this.handleFileUpload.bind(this);
  }

  handleFileUpload(event) {
    const file = event.target.files[0];
    console.log(file, file.name);
    this.props.uploadDocumentRequest({ file, name: file.name });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFileUpload} />
      </div>
    );
  }
}

export default connect(null, actions)(File);

2. Use an Arrow Function in the onChange Callback #

This is a quick, inline fix that automatically preserves the component's this context:

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class File extends Component {
  handleFileUpload(event) {
    const file = event.target.files[0];
    console.log(file, file.name);
    this.props.uploadDocumentRequest({ file, name: file.name });
  }

  render() {
    return (
      <div>
        {/* Wrap the handler in an arrow function */}
        <input type="file" onChange={(e) => this.handleFileUpload(e)} />
      </div>
    );
  }
}

export default connect(null, actions)(File);

Note: This creates a new function on every render, which is fine for small components but might have minor performance impacts in large, frequently re-rendered components.

3. Define the Handler as an Arrow Function (Class Fields Syntax) #

This is a modern, clean approach that avoids manual binding entirely:

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class File extends Component {
  // Arrow function automatically binds `this` to the component
  handleFileUpload = (event) => {
    const file = event.target.files[0];
    console.log(file, file.name);
    this.props.uploadDocumentRequest({ file, name: file.name });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleFileUpload} />
      </div>
    );
  }
}

export default connect(null, actions)(File);

Any of these three solutions will fix your this.props undefined error and let you call uploadDocumentRequest successfully from inside the handler. Pick the one that fits your coding style best!

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