问题描述
我正在某个项目上创建发送消息功能，但是单击“发送”按钮时，requset响应不正确。我在开发中使用了React js和Flux架构，我不知道我的代码有什么问题，有人可以给我建议吗？
此代码用于组件view.jsx
...
export default class Message extends React.Component {
constructor(props){
super(props);
this.state = {
isLoggedIn: SystemStore.isLoggedIn(),profile: ProfileStore.getProfile(),fullName: SystemStore.systemUser().fullName,site: '',email: '',phone: '',home: '',subject: '',description: '',type: '',submitting: false
};
this.clearForm = this.clearForm.bind(this);
this.handleProfileChange = this.handleProfileChange.bind(this);
this.handleSubjectChange = this.handleSubjectChange.bind(this);
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleSubmitComplete = this.handleSubmitComplete.bind(this);
this.handleSubmitError = this.handleSubmitError.bind(this);
}
componentDidMount(){
ProfileStore.addProfilechangelistener(this.handleProfileChange);
if(!this.state.profile){
ProfileActions.reload()
}
MessageStore.addSubmitMessagechangelistener(this.handleSubmitComplete);
MessageStore.addSubmitMessageFailchangelistener(this.handleSubmitError);//unresolved
}
componentwillUnmount(){
ProfileStore.removeProfilechangelistener(this.handleProfileChange);
MessageStore.removeSubmitMessagechangelistener(this.handleSubmitComplete);
MessageStore.removeSubmitMessageFailchangelistener(this.handleSubmitError);
}
render(){
return(
<Layout>
<div className='hs-dashboard row'>
<div className='col-md-12'>
<div className='col-xs-12 col-sm-6 col-md-5'>
<div className='col-xs-12 hs-message-form'>
<div className='row hs-message-form-head'>
<div className='hs-message-form-logo-container'>
<img className='col hs-message-form-logo' src='../../images/gii-logo-white.png'/>
<text className='hs-message-form-logo-label'>{T.translate('gii')}</text>
</div>
<div className='hs-message-form-label'>
{ T.translate('message.title') }
</div>
<div className='hs-message-form-label-1'>
{ T.translate('message.subtitle') }
</div>
</div>
<div className='row hs-message-form-body'>
<form className='hs-message-form-body-content'>
<label>
{ T.translate('message.type') }
</label>
<select
id="subject"
value={ this.state.subject }
onChange={ this.handleSubjectChange }
className="form-control"
required="true"
>
<option value="">{ T.translate('placeholder.selectSubject') }</option>
<option value="PRAYER">{ T.translate('message.pray') }</option>
<option value="ADDRESS">{ T.translate('message.address') }</option>
<option value="VISIT">{ T.translate('message.visit') }</option>
</select>
<label>
{T.translate('message.message')}
</label>
<textarea
type="text"
id="description"
className="form-control"
width=''
placeholder={ T.translate('placeholder.message') }
onChange={ this.handleMessageChange }
value={ this.state.description }
required
/>
<LaddaButton
loading={ this.state.submitting }
onClick={ this.handleSubmit }
data-spinner-size={ 30 }
data-style={ SLIDE_RIGHT }
>
{ T.translate('action.send') }
</LaddaButton>
</form>
</div>
</div>
</div>
</div>
</div>
</Layout>
)
}
clearForm(){
this.setState({ subject: '',description: '' });
alert(T.translate('msg.mailSent'));
}
handleProfileChange(){
this.setState({
site: ProfileStore.getProfile().primarySite.name,email: ProfileStore.getProfile().emailAddresses[0].email,phone: ProfileStore.getProfile().contactNumbers[0].countryCode + ProfileStore.getProfile().contactNumbers[0].number,home: ProfileStore.getProfile().contactNumbers[1].countryCode + ProfileStore.getProfile().contactNumbers[1].areaCode + ProfileStore.getProfile().contactNumbers[1].number,});
if(this.state.home === ''){
this.setState({
home: '-'
});
}
}
handleSubjectChange(evt){
this.setState({ subject: evt.target.value },() => {
if(this.state.subject === 'PRAYER') {
this.setState({ type: 'REQUEST' });
} else if(this.state.subject === 'ADDRESS') {
this.setState({ type: 'informatION' });
} else if(this.state.subject === 'VISIT'){
this.setState({ type: 'REQUEST' });
}
});
}
handleMessageChange(evt){
this.setState({ description: evt.target.value });
}
handleSubmit(evt) {
evt.preventDefault();
if(this.state.subject === ''){
alert('Error:' + T.translate('msg.subjectrequired'));
} else if(this.state.description === ''){
alert('Error:' + T.translate('msg.mailDescriptionrequired'));
} else {
alert(T.translate('msg.mailSending'));
}
this.handleProfileChange();
this.handleSubjectChange(evt);
this.handleMessageChange(evt);
var messageInfo = {
fullName: this.state.fullName,site: this.state.site,email: this.state.email,phone: this.state.phone,home: this.state.home,subject: this.state.subject,description: this.state.description,type: this.state.type
};
console.log(messageInfo);
this.setState({ submitting: true },() => {
MessageActions.sendMessage(messageInfo,(err) => {
if(err){
this.handleSubmitError();
}
});
});
}
handleSubmitComplete(){
this.setState({
submitting: false
});
this.clearForm();
}
handleSubmitError(){
this.setState({
submitting: false
});
}
}
这是我的动作action.js的代码
function _sendMessage(messageInfo,callback) {
jQuery.ajax({
method: 'POST',url: '/api/v1/supportTickets',contentType: 'application/json',data: JSON.stringify({
messageInfo: messageInfo
})
})
.done(function(messageInfo) {
callback(null,messageInfo);
})
.fail(function(err){
console.error('Failed to send message' + JSON.stringify(err));
callback(err,null);
});
}
var MessageActions = {
sendMessage: function(messageInfo,callback) {
_sendMessage(messageInfo,function(err,messageInfo) {
if(err) { return callback(err,null); }
dispatcher.dispatch({
actionType: MessageConstants.PERFORM_SEND_MESSAGE,messageInfo
});
callback(null,messageInfo)
});
}
};
module.exports = MessageActions;
此代码用于我的商店store.js
const SUBMIT_MESSAGE = 'SUBMIT_MESSAGE';
const SUBMIT_MESSAGE_Failed = 'SUBMIT_MESSAGE_Failed';
var MessageStore = assign({},EventEmitter.prototype,{
emitSubmitMessageChange: function(){
this.emit(SUBMIT_MESSAGE);
},addSubmitMessagechangelistener: function(callback){
this.on(SUBMIT_MESSAGE,callback);
},removeSubmitMessagechangelistener: function(callback){
this.removeListener(SUBMIT_MESSAGE,emitSubmitMessageFailChange: function(){
this.emit(SUBMIT_MESSAGE_Failed);
},addSubmitMessageFailchangelistener: function(callback){
this.on(SUBMIT_MESSAGE_Failed,removeSubmitMessageFailchangelistener: function(callback){
this.removeListener(SUBMIT_MESSAGE_Failed,callback);
}
});
dispatcher.register(function(action) {
switch(action.actionType){
case MessageConstants.PERFORM_SEND_MESSAGE:
MessageStore.emitSubmitMessageChange();
break;
case MessageConstants.PERFORM_SEND_MESSAGE_FAIL:
MessageStore.emitSubmitMessageFailChange();
break;
default:
//noop
}
})
export default MessageStore;
我使用后端的nodemailer在此处发送消息的代码是
...
const transporter = mail.createTransport({
service: service,host: host,auth: {
user: user,pass: pass
}
});
router.post('/',routing.requireAuth,function(req,res,next) {
var fullName = _.cloneDeep(_.get(req.body.messageInfo,'fullName'));
var site = _.cloneDeep(_.get(req.body.messageInfo,'site'));
var email = _.cloneDeep(_.get(req.body.messageInfo,'email'));
var phone = _.cloneDeep(_.get(req.body.messageInfo,'phone'));
var home = _.cloneDeep(_.get(req.body.messageInfo,'home'));
var subject = _.cloneDeep(_.get(req.body.messageInfo,'subject'));
var description = _.cloneDeep(_.get(req.body.messageInfo,'description'));
var type = _.cloneDeep(_.get(req.body.messageInfo,'type'));
var content = 'Nama : ' + fullName + '\nLokasi : ' + site + '\nContact : ' + phone + '/' + home + '\nPesan : ' + description;
validator.validateBody(req,{
'subject': {
notEmpty: true
},'description': {
notEmpty: true
},'type': {
notEmpty: true
}
},(err) => {
if(Err.invalidInput(next,err)) { return; } //unresolved -> still get error code 400,when all data is not empty
const mailOptions = {
from: fullName + '<' + email + '>',to: 'xxxxxx@xxxxxx.org',replyTo: email,subject: type + ':' + subject,text: content
};
transporter.sendMail(mailOptions,(err) => {
if(Err.unexpected(next,err)) {
return;
}
res.status(201)
.header('Location',api('supportTickets/'))
.json(req.body.messageInfo)
.end();
});
})
});
module.exports = router;
有什么建议吗？非常感谢您
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）