代码之家  ›  专栏  ›  技术社区  ›  Rohr Facu

react-未处理的拒绝(typeerror):\u this4.getnotes不是函数

  •  0
  • Rohr Facu  · 技术社区  · 6 年前

    我正在学习React,所以我创建了一个简单的应用程序来管理带有标题和描述的笔记。

    该应用程序与使用go创建的RESTAPI通信,因此我可以获取、编辑、创建和删除注释。

    所以,问题是,我有以下两个函数可以删除和编辑注释,它们在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):\u 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>
        )
      })
    

    注意部件把手保存注意功能代码:

    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函数,就像在删除函数中使用它一样。

    如有任何帮助,我们将不胜感激,感谢您抽出宝贵的时间,并为糟糕的英语道歉。祝你有美好的一天!

    2 回复  |  直到 6 年前
        1
  •  1
  •   Nick Lee    6 年前

    您还需要绑定函数saveeditnote。此.getNotes()的调用站点位于saveEditNote内,该位置与定义getNotes的位置不同。

        2
  •  3
  •   Abubakar Ibrahim    6 年前

    那呢? saveEditNote(note) removeNote(note) 功能?你把它们捆起来了吗? getNotes() 功能?如果没有,请绑定它们或使用arrow函数这样声明它们: saveEditNote = note => {...} 同样适用于 拆除(注) 功能。希望能解决你的问题