问题描述
我是ReactJS和Flux的新手,我正在某个项目上使我的办公室网站上的发送消息功能正常,在我添加一些验证之前,所有代码均正常工作。添加一些验证后,它将发送一个内部服务器错误,当某些字段为空时,该消息将不会发送到我的电子邮件中,但是当所有字段都不为空时,该消息将发送到我的电子邮件中。
这是我的views.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].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);
});
}
var MessageActions = {
sendMessage: function(messageInfo,callback) {
_sendMessage(messageInfo,function(err,messageInfo) {
if(err) { return callback(err); }
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;
这是我通过gmail发送消息的后端
const _ = require('lodash');
const express = require('express');
const router = express.Router();
const mail = require('nodemailer');
const routing = requirerp('/lib/routing');
const api = routing.api;
const config = require('config');
const service = config.get('hits.supportTickets.service');
const host = config.get('hits.supportTickets.host');
const user = config.get('hits.supportTickets.auth.user');
const pass = config.get('hits.supportTickets.auth.pass');
const Err = requirerp('/utils/restErrors');
const validator = requirerp('/utils/restValidation');
const transporter = mail.createTransport({ //almost resolved => should move the code to another file,or just like this?
service: 'Gmail,host: 'smtp.gmail.com,auth: {
user: 'no.replyxxxxx@xxxx.com',pass: 'xxxxx'
}
});
router.post('/',routing.requireAuth,(req,res,next) => {
var fullName = req.body.fullName;
var site = req.body.site;
var email = req.body.email;
var phone = req.body.phone;
var home = req.body.home;
var subject = req.body.subject;
var message = req.body.description;
var type = req.body.type;
var content = 'Nama : ' + fullName + '\nLokasi : ' + site + '\nContact : ' + phone + '/' + home + '\nPesan : ' + message;
validator.validateBody(req,{ //using validator get error code 500 -> Internal Server Error
'fullName': {
notEmpty: true
},'site': {
notEmpty: true
},'email': {
motEmpty: true
},'phone': {
notEmpty: true
},'home': {
notEmpty: true
},'subject': {
notEmpty: true,in: {
option: ['PRAYER','ADDRESS','VISIT']
}
},'descrption': {
notEmpty: true
},'type': {
notEmpty: true
}
},function(err) {
if(Err.invalidInput(next,err)) { return; }
const mailOptions = {
from: fullName + '<' + email + '>',to: 'xxxx@xxxx.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 (将#修改为@)