时间戳

首页 > 解决方案 > 无法理解这种行为

javascript - 无法理解这种行为

问题描述

我有一个简单的笔记应用程序，即使状态已正确更新，删除也无法正常工作。正如我在控制台上看到的，状态正在正确更新。但是由于某种原因，所有的笔记，包括我点击删除的笔记，都在 DOM 上被删除了。例如，如果我有 3 个音符 ["hello","hi","hey"]，如果我删除第二个音符 ("hi")，状态会显示正确的音符 ["hello","hey"] 但两者页面上的“hi”和“hey”被删除，而不仅仅是“hi”。我不明白我哪里出错了，所以我想纠正它。

应用程序.js：

handleDelete = (note_id) => {
    const id = 'display-' + note_id;
    console.log(id);
    document.getElementById(id).style.display = 'none';//remove element

    //delete the note and update state
    const newNotesList = this.state.notesList;
    newNotesList.splice(note_id,1);
    this.setState({
      notesList : newNotesList
    })
    console.log(this.state.notesList)
  }

显示.js：

render(){
    const notesList = this.props.notesList;
    const displayNotes = notesList.map( (note,note_id) =>
      <div id={ 'display-' + note_id } className="display">
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );

    return <div>{displayNotes}</div>;
  }

标签： javascripthtmlreactjs

解决方案

这样做

// don't mutation object

// App.js
handleDelete = (note_id) => {
    //delete the note and update state
    const newNotesList = this.state.notesList.filter((item, index)=> index !== note_id)
this.setState({
  notesList : newNotesList
})
  }

// Display.js
render(){
    const notesList = this.props.notesList;
    const displayNotes = notesList.map( (note,note_id) =>
      <div>
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );

    return <div>{displayNotes}</div>;
  }

====这是原因========

一开始state.note是 ["hello","hi","hey"]，在handleDelete你删除 "hi" 的函数中，使dispaly-1display 的 id 变为隐藏，所以当 react 渲染state.note === ["hello","hey"]"hey" 的元素的 id 变得dispaly-1如此“嘿”将被隐藏。你只会看到“你好”

handleDelete = (note_id) => {
    // this.state.notesList === ["hello","hi","hey"]
    const id = 'display-' + note_id;
    console.log(id);
    // the problem is u hidden the next element

    // 1. newNotesList.splice(note_id,1);
    // 2. document.getElementById(id).style.display = 'none'
    // two methods choose one or you will hidden two elements


    document.getElementById(id).style.display = 'none';//remove element

    //delete the note and update state
    const newNotesList = this.state.notesList;
    
    newNotesList.splice(note_id,1);
    this.setState({
      notesList : newNotesList
    })
    console.log(this.state.notesList)

   // for example
   // the `this.state.notesList` new is ["hello","hey"]
  }


notesList.map( (note,note_id) =>
      // `note` is ["hello","hey"]  , u don't need hidden the `2rd` element
      //you have been delete 'hi' ` the id of `display-1`'s display ==='hidden' 
     // now "hey"'s id is `display-1`
      <div id={ 'display-' + note_id } className="display">
      {/*some code*/}
      <button type="button" className="delete-button"
     onClick = { () => this.props.handleDelete(note_id) } > Delete </button>
      </div> );
``

推荐阅读