javascript - React - 未处理的拒绝(TypeError):_this4.getNotes 不是函数
问题描述
我正在学习反应,所以我创建了一个简单的应用程序来管理带有标题和描述的笔记。
该应用程序与使用 Go 制作的 REST API 进行通信,因此我可以获取、编辑、创建和删除笔记。
所以,问题如下,我有这两个功能来删除和编辑笔记,它们在 App.js 文件中:
removeNote(note) {
fetch('http://localhost:9000/notes/delete', {
mode: 'cors',
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(note)
}).then(res => {
console.log(res.text);
this.getNotes();
})
}
saveEditNote(note) {
fetch('http://localhost:9000/notes/update', {
mode: 'cors',
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(note)
}).then(res => {
console.log(res);
this.getNotes();
})
}
功能不同,但两个函数的作用几乎相同,它们向后端发送一个 http 请求,当它得到响应时,它调用this.getNotes(); 更新笔记列表的功能。
现在,当我按下“删除”按钮时,应用程序成功删除了笔记,并调用 getNotes() 来更新列表就好了。
当我按下“保存”按钮更新笔记时,应用程序成功更新了笔记,但是,当它调用 getNotes() 时出现以下错误
未处理的拒绝(TypeError):_this4.getNotes 不是函数
问题: 为什么它在编辑功能中失败,但在删除功能中却像一个魅力?
我在 App.js 中绑定了这个函数,如下所示:
this.getNotes = this.getNotes.bind(this);
所以这应该不是问题。
注意组件标签代码:
cards = this.state.notes.map((note, i) => {
return (
<Note note={note} index={i} onRemoveNote={this.removeNote} onEditNote={this.saveEditNote} key={i}></Note>
)
})
Note组件handleSaveEditNote功能代码:
handleSaveEditNote(note) {
note.name = this.state.noteName;
note.description = this.state.noteDescription;
this.props.onEditNote(note)
}
我通过从 Note.js 调用 App.js 中的 getNotes 函数然后刷新页面窗口来解决问题。
getNotes() {
this.props.onGetNotes();
window.location.reload();
}
但它很难看,我应该能够在编辑功能中使用 getNotes 功能,就像我在删除功能中使用它一样。
任何帮助将不胜感激,感谢您的时间并为糟糕的英语道歉。祝你有美好的一天!
解决方案
saveEditNote(note)
和removeNote(note)
函数呢?你有没有像你为getNotes()
函数做的那样绑定它们?如果没有,则绑定它们或使用箭头函数来声明它们,如下所示:saveEditNote = note => {...}
和removeNote(note)
函数相同。希望能解决你的问题
推荐阅读
- flutter - Flutter 应用程序:无法返回类型为“Either”的值
" from 方法,因为它的返回类型为 "Either " - javascript - 我的搜索似乎无法弄清楚。我的情况是字符串和数组的问题
- html - 如何使图像自动调整大小以适合之间有边距的线?
- java - 满足某些条件时如何执行 button.setOnTouchListener (Kotlin)
- c# - 使用 HttpClient 或其他 C# 类发送带有密钥库文件的肥皂请求
- sql - PostgreSQL 索引减少了数据大小但使查询变慢
- php - 服务器移动后TYPO3 argon2密码哈希匹配部分不匹配
- r - 在导入之前过滤 CSV 文件以获取特定值
- javascript - Discord.js 用户状态自定义
- postgresql - Postgres 动态过滤条件