React - 组件中的回调

我试图让一个应用程序从api获取回调，然后在函数中返回它（我不知道这是否合理）。但是我怎样才能做到这一点，以便当我调用该函数时，我将一个回调附加到它上面，然后返回回调数据。这是非常混乱试图描述它如此虐待试图解释，因为我进入我的代码...React - 组件中的回调

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 ）并尝试在接收数据时进行回调。我理解回调的概念（sorta）和如何使用它们，但我不确定如何使函数有回调。

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的错误。

来源

2017-09-15 Stuart Fong

你的错误是从这段代码来：

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); 
});

看起来像你只需要更新您的uploadToCloudinary功能PARAMS接受回调：

// 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); 
}

来源

2017-09-15 20:13:23

嘿你做了什么不尽管完全错误，而不是委托如何处理请求的责任，您可以返回上传函数的承诺，然后添加处理程序，然后和catch。是否有意义？然后，您可以自己管理来自服务器的内容，并相应地更新状态。如果有帮助，我可以给你写一个代码示例让我知道。除此之外，你的错误是因为你没有作为参数传递回调

来源

2017-09-15 20:15:15

React - 组件中的回调

回答

相关问题