React и LocalStorage проблема дублирования данных

Question

Просто я добавил один вход и одну кнопку отправки. Если я добавлю некоторую строку во входную информацию noteTitle, я перечислю ее внутри тега.

Но когда я нажимаю кнопку, добавляется дубликат.

Например:

ввод -> ADAM нажмите

Печать: ADAM

и

ввод -> МАЙК нажмите

Печать: АДАМ, АДАМ, МАЙК

Если я обновлю страницу, все в порядке.

Так что вы думаете о том, в чем проблема?

import React, { Component } from 'react';

export default class NoteAdd extends Component {

constructor(props) {
super(props);
console.log("Konsol:", localStorage.getItem("state"));  
}

state = {
  id : 0,
  noteList : [],
  noteTitle : ""
}     

onChangeTitle = (e) => {
this.setState({
    noteTitle : e.target.value
});   
}

onSubmitForm = (e) => {
let {id, noteList, noteTitle} = this.state; 
e.preventDefault();
this.setState((prevState) => ({
  id: prevState.id + 1
})); 

if(localStorage.getItem("state") !== null) {
  noteList.push({
    id : id,
    noteTitle : localStorage.getItem("state")  
  });
}

 noteList.push({
  id : id,
  noteTitle : noteTitle   
 });

localStorage.setItem("state", 
  noteList.map(user => {
    return (
      user.noteTitle
    )
  })
 ); 
} 

render(){
 const {noteTitle, noteContent} = this.state;  

return (
  <div>
      <form>
        <div className="noteTitle"><h5>Not başlığı :</h5> <input value={noteTitle} onChange={this.onChangeTitle} type="text" /></div>
        <input className="noteSubmitBtn" type="submit" onClick={this.onSubmitForm} value="Notu Ekle"/>
        <span id="kayit">{localStorage.getItem("state")}</span>
      </form>
      {/* <NoteList noteList={this.state.noteList} /> */}
  </div>
) 
}

}

Answer 1

На вашей функции onChange вы устанавливаете состояние для ввода с клавиатуры:

onChangeTitle = (e) => {
this.setState({
    noteTitle : e.target.value
});   
}

Теперь, когда вы регистрируете первое, ваше состояние:

this.state.noteTitle = 'ADAM';

Теперь вынабрал mike, после чего ваше состояние изменилось на:

this.state.noteTitle = 'ADAMMIKE';

Вам необходимо очистить свое состояние после отправки значения, подобного этому, чтобы при вводе нового имени оно начиналось с 0.

onSubmitForm = (e) => {
let {id, noteList, noteTitle} = this.state; 
e.preventDefault();
this.setState((prevState) => ({
  id: prevState.id + 1
})); 

if(localStorage.getItem("state") !== null) {
  noteList.push({
    id : id,
    noteTitle : localStorage.getItem("state")  
  });
}

 noteList.push({
  id : id,
  noteTitle : noteTitle   
 });

localStorage.setItem("state", 
  noteList.map(user => {
    return (
      user.noteTitle
    )
  })
 );
this.setState({noteTitle: '', noteContent: ''}) // Here you need to reset the state to it's initial value.

}