Javascript 如何访问类外函数中的状态？

我正在尝试使用axios将一个图像上传到AmazonS3，并将所有内容设置好，但不断出现错误：TypeError:无法读取未定义的属性“props”。我使用两个文件；uploadProductPage.js和uploadProductPageClassComponent.js。我在这两个系统中都使用axios。下面是每一篇文章中感兴趣的片段。我怎样才能让它工作？非常感谢您的帮助

uploadProductPage.js：

const onSubmit = (event, files) => {
        event.preventDefault();

const data = new FormData();// If file selected
  if ( this.props.state.selectedFile ) {data.append( 'profileImage', this.props.state.selectedFile, this.props.state.selectedFile.name );Axios.post( '/api/photo/profile-img-upload', data, {
    headers: {
     'accept': 'application/json',
     'Accept-Language': 'en-US,en;q=0.8',
     'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
    }
   })
    .then( ( response ) => {if ( 200 === response.status ) {
      // If file size is larger than expected.
      if( response.data.error ) {
       if ( 'LIMIT_FILE_SIZE' === response.data.error.code ) {
        this.ocShowAlert( 'Max size: 2MB', 'red' );
       } else {
        console.log( response.data );// If not the given file type
        this.ocShowAlert( response.data.error, 'red' );
       }
      } else {
       // Success
       let fileName = response.data;
       console.log( 'fileName', fileName );
       this.ocShowAlert( 'File Uploaded', '#3089cf' );
      }
     }
    }).catch( ( error ) => {
    // If another error
    this.ocShowAlert( error, 'red' );
   });
  } else {
   // if file not selected throw error
   this.ocShowAlert( 'Please upload file', 'red' );
  }};

uploadProductPageClassComponent.js：

export class UploadProductPage extends Component 
{constructor( props ) {
    super( props );
    this.state = {
        selectedFile: null,
        selectedFiles: null
       }
onSubmit = (event) => {
        event.preventDefault();
 const data = new FormData();// If file selected
                if ( this.state.selectedFile ) {data.append( 'profileImage', this.state.selectedFile, this.state.selectedFile.name );
axios.post( '/api/photo/profile-img-upload000', data, {
                  headers: {
                   'accept': 'application/json',
                   'Accept-Language': 'en-US,en;q=0.8',
                   'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
                  }
                 })
                  .then( ( response ) => {if ( 200 === response.status ) {
                    // If file size is larger than expected.
                    if( response.data.error ) {
                     if ( 'LIMIT_FILE_SIZE' === response.data.error.code ) {
                      this.ocShowAlert( 'Max size: 2MB', 'red' );
                     } else {
                      console.log( response.data );// If not the given file type
                      this.ocShowAlert( response.data.error, 'red' );
                     }
                    } else {
                     // Success
                     let fileName = response.data;
                     console.log( 'fileName', fileName );
                     this.ocShowAlert( 'File Uploaded', '#3089cf' );
                    }
                   }
                  }).catch( ( error ) => {
                  // If another error
                  this.ocShowAlert( error, 'red' );
                 });
                } else {
                 // if file not selected throw error
                 this.ocShowAlert( 'Please upload file', 'red' );
    }

---

你能修好你的压痕吗？帮助我们使您的代码更具可读性使您更容易获得帮助。第一个示例似乎不是组件，因此它没有任何

道具

。您应该在UploadProductPage中调用UploadProductPage组件，以便使用道具将数据传递到UploadProductPage。如：