node.js - 数据未正确发送到后端
问题描述
我正在使用 react 和 nodejs 作为后端,后端工作正常我想当我尝试使用邮递员但尝试连接到我的前端时它没有正确插入
这是反应应用程序中的代码
class CreateChapter extends React.Component {
constructor(props){
super(props);
this.state={
// editorState: EditorState.createWithContent(convertFromRaw(JSON.parse(content))),
titleChapter: "",
editorState: EditorState.createEmpty(),
id: this.props.location.state.id,
status: '',
errorSaving: '',
saved: false
}
}
// handle editor change
onEditorStateChange = (editorState) => {
this.setState({ editorState })
}
//handle title change
onTitleChange = (event) => {
this.setState({
titleChapter: event.target.value
})
}
//load data chapter saved
loadChapterSaved = (data) => {
this.setState({
titleChapter: data.titleChapter,
editorState: data.editorState,
status: 'saved'
})
}
//load data chapter published
loadChapterPublished = (data) => {
this.setState({
titleChapter: data.titleChapter,
editorState: data.editorState,
status: 'published'
})
}
//save data
onSaveData = () => {
const convertedData = convertToRaw(this.state.editorState.getCurrentContent());
fetch('http://localhost:3001/new-chapter',{
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: this.state.id,
editorState: convertedData,
titleChapter: this.state.titleChapter,
status: this.state.status
})
})
.then(response => response.json())
.then( chapter => {
console.log(chapter)
if(chapter === 'empty input'){
this.setState({
errorSaving: 'Please fill Title Chapter and the Content'
})
}else{
this.loadChapterSaved(chapter);
}
})
}
render() {
const { classes, ...rest } = this.props;
const {editorState, id, errorSaving, saved} = this.state;
console.log('status', this.state.status)
return (
<div>
<HeaderHome/>
<div className={classNames(classes.main, classes.mainRaised)}>
<div className={classes.container}>
<div className={classes.storymargin}>
<h2 className={classes.title}>New Chapter</h2>
<Card className={classes.chaptercontainer}>
<CardContent>
<TextField
fullWidth
label=" New Chapter Title"
id="chapter-title"
onChange={this.onTitleChange}
InputProps={{
disableUnderline: true,
classes:{
input: classes.titleinput
}
}}
InputLabelProps={{
shrink: true,
className: classes.titleformlabel
}}
margin="normal"
/>
<Editor
editorState={editorState}
wrapperClassName={classes.homewrapper}
editorClassName={classes.homeeditor}
toolbarClassName={classes.toolbar}
placeholder="Begin typing..."
onEditorStateChange={this.onEditorStateChange}
/>
</CardContent>
{errorSaving ?
<div className={classes.errorSavingChap}>
{errorSaving}
</div>
:
""
}
<CardActions className={classes.displaybutton}>
<Button size="small" clor="primary" className={classes.buttonnextchap}
onClick={this.onSaveData}>
Save
</Button>
<Button size="small" clor="primary" className={classes.buttonnextchap}
onClick={this.onPublishData}>
Publish
</Button>
</CardActions>
</Card>
</div>
</div>
</div>
<div className={classes.footer}>
<Footer />
</div>
</div>
);
} }
export default withStyles(createStoryStyle)(CreateChapter);
问题是this.state.status
没有正确发送到后端,它总是收到初始状态为空。我认为这与setState
异步的方式有关,但我不太确定。当我在邮递员中尝试时,它确实有效。
这是我的后端
app.post('/new-chapter', (req, res) => {
const { id, titleChapter, editorState, status } = req.body;
if(titleChapter === '' || editorState === ''){
db('story').where('id_user', '=', id)
.increment('chapter', 0)
.returning('chapter')
.then( chapter => {
res.json('empty input')
})
.catch( err => res.json('cannot add chapter'))
}else{
db('story').where('id_user', '=', id)
.increment('chapter', 1)
.returning('chapter')
.then( chapter => {
db.select('entry').from('story').where('id_user', '=',id)
.then( newChap => {
const chapterEntry = newChap[newChap.length - 1].entry;
db('chapter').where('id_user', '=', id)
.returning('*')
.insert({
chapter: chapter[0],
titlechapter: titleChapter,
content: editorState,
id_user: id,
status: status,
entry: chapterEntry,
})
.then( newChapter => {
res.json(newChapter[0])
})
.catch( err => res.json('cannot add new chapter'))
}
)
})
.catch( err => res.json('cannot add new chapter'))
}
})
解决方案
推荐阅读
- javascript - 'object HTMLParagraphElement' 第一次使用函数
- python - 在驱动器上写入二进制文件的最快方法
- sql - sql获取单行进行更新
- java - 尽管 POM 使用 Spring boot starter 5.XX,但 Java Spring Boot 项目仍导入 Spring Web/MVC 4.XX
- c++ - 为什么输出文件为空
- java - 如何在字节码中更新 IF_ICMPGE 的分支而不会出错
- nginx - nginx入口中的cor域白名单
- macos - 核心数据实体全局数据
- javascript - 将数据从“data-”属性中获取到 JavaScript Var(使用前缀问题)
- c++ - C++:使用 void 作为模板参数