1

私はJavascriptの世界が初めてで、 Reactスターターキットで始めた簡単なReactプロジェクトを作成するためにいくつかを始め、簡単なアップロードファイルである最初のモジュールを追加しました:

ファイルをアップロードする。

import React, { Component, PropTypes } from 'react';
import FormData from 'form-data';
import $ from 'jquery';

class UploadPanel extends Component {
  state = {
    file:'',
  };
  uploadSelectedFile() {

    // Add the uploaded image content to the form data collection
    var data = new FormData();
    data.append("image", this.state.file);
    data.append("temp", 'temp');
    $.ajax({
      method: "POST",
      url: "rest/dicom/upload",
      xhr: function () {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
      cache: false,
      data: data,
      contentType: false,
      processData: false,
      success: function (data) {
        alert('file sent');
        console.log(data);
      },
      error: function (data) {
        alert('error');
        console.log(data);
      }
    });
  }
  handleFileChange(e){
    let file = e.target.files;
    if(file.length>0)
      this.setState({file: file});
    else
      this.setState({file: ''});
  }

  render() {
    //return <p> hi this is a test </p>
    //var createItem = function (item) {
    //  return <li key={item.id}>{item.text}</li>;
    //};

    return <form onSubmit={this.uploadSelectedFile()}>
      <input type="file" name="image" id="image" value={this.state.file} onChange={this.handleFileChange}/>
      <input type="submit" value="ارسال"  disabled={this.state.file!=''}/>
    </form>;
  }
}


export default UploadPanel;

しかし、ページを開くと、(サーバーで) コンパイルすると次のエラーが発生します。

TypeError: _jquery2.default.ajax is not a function
at UploadPanel.uploadSelectedFile (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:24:7)
at UploadPanel.render (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:59:33)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:587:34)
at ReactCompositeComponentMixin._renderValidatedComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:607:32)
at wrapper [as _renderValidatedComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:220:30)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)
at ReactDOMComponent.Mixin._createContentMarkup (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:591:32)
at ReactDOMComponent.Mixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:479:29)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:225:34)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)

誰でも助けることができますか？なぜサーバーでクライアント側のコードを実行したいのですか?

4

1 に答える 1

2

あなたのrender関数では、構文でわずかな間違いを犯しました (特に、他のフレームワークから来ている場合は特に、React のすべての人を最初に捕まえると思います)。この行を見てください：

return <form onSubmit={this.uploadSelectedFile()}> ... </form>

関数名の最後に角かっこがあります。つまり、サーバー上を含め、関数が実行されるたびに関数を呼び出してrenderいます!

実証する最善の方法は、JSX を実際に実行される JavaScript に変換することです。

return React.createElement("form", { onSubmit: this.uploadSelectedFile() });

関数自体ではなく、onSubmitプロパティを の戻り値に設定しています。this.uploadSelectedFile

修正する必要があることが 2 つあります。まず、前述のステートメントの末尾から括弧を削除します。2 番目のことは少しわかりにくいです。ES6 クラスを使用しているため、関数を正しい値にバインドすることについて明示する必要がありthisます。

class UploadPanel extends Component {
    ...
    constructor() {
        super();
        this.uploadSelectedFile = this.uploadSelectedFile.bind(this);
        this.handleFileChange = this.handleFileChange.bind(this);
    }
    ...
}

stage-0Babel プリセットを使用している場合は、アロー関数を使用してこれを行うよりエレガントな方法もあります。

うまくいけば、それはあなたのために少し片付けました！

于 2016-05-18T10:30:12.677 に答える