Verwenden Sie Reagieren, um eine Todo-Liste zu erstellen, aber es hat unerwartete Ergebnisse

Question

Dies ist meine Praxis-Demo, es geht um Todo-Liste.
Sie können sehen, wenn ich eine Aufgabe bestätige. Es wird weg sein, aber der nächste Task-Status wird überprüft.

Wie kann ich reparieren? Danke im Voraus.

Code:

import React, { Component } from 'react'; 

import InpuText from './component/InpuText'; 

class Note extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     inputdata: 'no data', 
     noteData: '' 
    } 
    } 
    componentWillMount() { 
    if(localStorage.getItem('note')) { 
     this.setState({ 
     noteData: JSON.parse(localStorage.getItem('note')).details 
     }) 
    } 
    } 
    getInputValue(getValue) { 
    this.setState({ 
     inputdata: getValue 
    }) 
    if(localStorage.getItem('note')) { 
     this.state.noteData.push({ 
     text: getValue 
     }) 
     let note = { 
     details: this.state.noteData 
     } 
     localStorage.setItem('note', JSON.stringify(note)); 
    }else { 
     let note = { 
     details: [] 
     } 
     note.details.push({ 
     text: getValue 
     }) 
     this.setState({ 
     noteData: note.details 
     }) 
     localStorage.setItem('note', JSON.stringify(note)); 
    } 
    } 
    finish(index, e) { 
    console.log(e.target.checked) 
    if(e.target.checked === true) { 
     this.state.noteData.splice(index, 1) 
     this.setState({ 
     noteData: this.state.noteData 
     }) 
     let note = { 
     details: this.state.noteData 
     } 
     localStorage.setItem('note', JSON.stringify(note)); 
    } 
    } 
    render() { 
    return (
     <div> 
     notepad 
     <InpuText getInputValue={this.getInputValue.bind(this)}/> 
     {/* <p>input data:{this.state.inputdata}</p> */} 
     <div>todo</div> 
     { 
      this.state.noteData 
      ? 
      <ul> 
       {this.state.noteData.map((notes, i)=>(
       <li key={i}> 
        {i}:{notes.text} 
        <input type="checkbox" onChange={this.finish.bind(this, i)}/> 
       </li> 
      ))} 
      </ul> 
      : 
      <p>no task</p> 
     } 
     <div>done</div> 
     <ul> 
      <li>123</li> 
     </ul> 
     </div> 
    ); 
    } 
} 

export default Note; 

finish() Array behandeln die Zielaufgabe zu entfernen.

Answer 1

Ich denke, das auf ein paar Dinge zurückzuführen ist:

• Sie den Index des Elements verwenden (i) als der Schlüssel reagieren. Dies ist eine schlechte Übung, weil der Schlüssel nicht stabil ist. Betrachten Sie als Beispiel drei Dinge - ihre Schlüssel wären 0,1,2. Dann markierst du den mittleren als abgeschlossen und renderst nur zwei Elemente mit den Schlüsseln 0 und 1. Allerdings hatten diese Elemente während des letzten Renderns jeweils die Schlüssel 0 und 2, was normalerweise bedeutet, dass der Abgleich durcheinander gebracht wird. Details siehe https://facebook.github.io/react/docs/reconciliation.html. Kurz gesagt, die Schlüssel müssen zwischen den Renderern gleich bleiben.
• Sie geben keinen Wert für das Ankreuzfeld an, daher ist es unkontrolliert (https://facebook.github.io/react/docs/uncontrolled-components.html), was bedeutet, dass es beim Anklicken frei/abgewählt wird.

Diese beiden Punkte zusammen, um das Verhalten führen, die Sie sehen: Sie können den Artikel klicken, wird geprüft (da der Eingang unkontrolliert ist), dann in der folgenden machen es mit dem falschen Punkt (wegen der in Einklang gebracht wird indexbasierter Schlüssel).

Um dies zu beheben, verwenden Sie den Auflistungsindex nicht als Schlüssel, sondern verwenden Sie eine unveränderliche eindeutige ID aus den tatsächlichen Elementen (falls keine ID vorhanden ist, fügen Sie eine hinzu). Setzen Sie die Kontrollkästchen prop Wert, anstatt sie unkontrolliert zu lassen. Sie könnten z.B. Fügen Sie jedem Element im Modell eine isComplete -Eigenschaft hinzu, und setzen Sie den Wert für das Kontrollkästchen property darauf.