Question

不起作用，请使用App组件的handleRemoveNote函数：

  handleRemoveNote(id){

    let{ notes } = this.state;

    notes = notes.filter(function(note) {
        return note.noteId !== id;
    })

    for (var i = 0; i < notes.length; i++) {
      notes[i].noteId = i+1;
    }

    this.setState({ notes })
    console.log(notes)
  }

组件说明：

  handleRemove(noteId){
    this.props.removeNote(noteId);
  }

致电onClick

 <span
     onClick = {() => this.handleRemove(this.noteId)}
     >
     <i className="fas fa-trash-alt float-right"></i>
 </span>

App组件中注释的呈现：

      {
        this.state.notes.map(note =>{
        return(
          <Note
            removeNote = {this.handleRemoveNote}
            noteId = {note.noteId}
            noteContent= {note.noteContent}
            />
        )
        })
      }

Note组件的构造函数：

  constructor(props){
    super(props);
    this.noteId = props.noteId;
    this.noteContent = props.noteContent;
  }

应用组件：https://pastebin.com/VCrJBdXT
说明组件：https://pastebin.com/hDmPaGuZ

我不明白为什么它不起作用，它从列表中删除了最后一个项目，而不是我想要的项目，我做了一个“ console.log（注释）”，它向我展示了正确删除元素的排列方式

Answer 1

链接提供的代码中有一些问题： 1.在地图中进行迭代时必须提供key属性

this.state.notes.map(note =>
<Note
removeNote = {this.handleRemoveNote}
noteId = {note.noteId}
noteContent= {note.noteContent}
key={note.noteId}
/>)

，然后应将其从Note render（）方法中删除

您实际上并不想在删除后重新分配密钥，可能必须从服务器获取这些ID，因此必须将它们用作密钥。这也是这里的主要问题

这样，新的notes数组将不包含具有键的元素，该键是最后一个元素的索引，因此它认为您想使用此键（即最后一个元素）删除该元素。只需删除该循环，一切就可以正常工作

for (var i = 0; i < notes.length; i++) {
    notes[i].noteId = i+1;
}

用react删除数组中的元素，不起作用

1 个答案: