コンポーネント内のリアクションコールバック

Question

私はAPIからコールバックを取得し、それを関数に返します（それが意味をなすかどうかわかりません）。しかし、私はその関数を呼び出すときにコールバックをアタッチし、コールバックデータを返します。これは、だからここに私がやっているものを...

uploadToCloudinary(file){ 
    const CLOUDINARY_URL = "MY_CLOUDINARY_URL"; 
    const CLOUDIARY_UPLOAD_PRESET = "MY_CLOUDIARY_UPLOAD_PRESET" 
    let formData = new FormData(); 

    formData.append("file", file); 
    formData.append("upload_preset", CLOUDIARY_UPLOAD_PRESET) 

    axios({ 
     url: CLOUDINARY_URL, 
     method: "POST", 
     headers: { 
     "Content-Type": "application/x-www-form-urlencoded" 
     }, 
     data: formData 
    }).then(function(res){ 
     callback(new Meteor.Error(400, "Error"), res); 
    }).catch(function(err){ 
     console.log(err); 
    }) 
    console.log(file); 
    } 

それ私は私のコードを入力として説明するので、病気の試みを記述しようとしている非常に混乱している（私はファイルの引数を取得し、cloudinaryにそれを入力していたファイルの取り扱いAPIです）、データを受け取ったときにコールバックを試みます。私はコールバックの概念を理解していますが、実際の使用方法はわかりません。関数にコールバックがあります。

addNote(e){ 
    e.preventDefault(); 
    let title = this.refs.title.value; 
    let subject = this.refs.subject.value; 
    let description = this.refs.description.value; 
    let allUrls = [this.refs.imageURL.value].concat(this.state.urls); 
    let imageURL = allUrls.filter(function(entry) { return entry.trim() != ''; }); 
    let userId = Meteor.userId(); 
    let userEmail = Meteor.user().emails[0].address; 
    let createdAt = Date.parse(new Date()); 
    let unit = this.refs.unit.value; 
    let file = this.refs.fileInput.files[0]; 

    if(!Meteor.userId()){ 
     this.setState({ 
     message: "You need to login before you can add a note", 
     loginMessage: <Link to="/login">Login</Link> 
     }) 
     throw new Meteor.Error(400, "User is not signed in.") 
    } 

    if(title && subject && description && unit){ 
     if(imageURL || file){ 
      let noteInfo = { title, subject, description, imageURL, userId, userEmail, createdAt, unit }; 
      this.uploadToCloudinary(file, (err, res) => { 
      console.log(res) 
      }); 
      //need to make a callback for this^^^^ (ln 52) 
      Meteor.call("notes.insert", noteInfo, (err, res) => { 
      if(err){ 
       this.setState({message: err.reason}); 
       console.log(err) 
      }else{ 
       this.props.history.push("/") 
      } 
      }) 
     }else { 
      this.setState({ message: "You must fill in all the blanks. " }) 
     } 
     } 
    } 

ここで私は関数を呼び出して、うまくいけばエラー/レスポンスを得ようとしています。だから私の質問は、私はどのように反応コンポーネントでコールバックを作るのですか？私はcallback is not definedというエラーが出ています。

Answer 1

あなたのエラーコードのこの部分から来ている：あなただけのコールバックを受け入れるようにuploadToCloudinary関数のparamsを更新する必要があるよう

axios({ 
    url: CLOUDINARY_URL, 
    method: "POST", 
    headers: { 
     "Content-Type": "application/x-www-form-urlencoded" 
    }, 
    data: formData 
}).then(function(res){ 

    // Right here...callback hasn't been defined anywhere 
    callback(new Meteor.Error(400, "Error"), res); 

}).catch(function(err){ 
    console.log(err); 
}); 

はルックス：

// Add a second param here 
uploadToCloudinary(file, callback){ 
    const CLOUDINARY_URL = "MY_CLOUDINARY_URL"; 
    const CLOUDIARY_UPLOAD_PRESET = "MY_CLOUDIARY_UPLOAD_PRESET" 
    let formData = new FormData(); 

    formData.append("file", file); 
    formData.append("upload_preset", CLOUDIARY_UPLOAD_PRESET) 

    axios({ 
     url: CLOUDINARY_URL, 
     method: "POST", 
     headers: { 
      "Content-Type": "application/x-www-form-urlencoded" 
     }, 
     data: formData 
    }).then(function(res){ 
     callback(new Meteor.Error(400, "Error"), res); 
    }).catch(function(err){ 
     console.log(err); 
    }) 
    console.log(file); 
} 

Answer 2

ねえ、あなたがやったことではありません完全に間違っているのですが、リクエストの処理方法の責任を委任する代わりに、アップロード機能から約束を返してからのハンドラを追加すると、とキャッチ。それは理にかなっていますか？その後、サーバーから何が来ているのかを自分で管理し、それに応じて状態を更新することができます。それが役に立ったらコードサンプルを書くことができます。それ以外のエラーは、パラメータとしてコールバックを渡さないためです。