Reactjs React和LocalStorage重复数据问题

简单地说，我添加了一个输入和一个提交按钮。如果我在noteTitle输入中添加一些字符串，我将在标记中列出它

但当我点击按钮时，它会重复

例如：

输入->亚当 点击

印刷品：亚当

以及：

输入->麦克风 点击

印刷品：亚当，亚当，迈克

如果我刷新页面，一切正常

那么你认为问题出在哪里呢

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>
) 
}

}

import React，{Component}来自'React'；
导出默认类NoteAdd扩展组件{
建造师（道具）{
超级（道具）；
log（“Konsol:”，localStorage.getItem（“state”）；
}
状态={
id:0，
注释列表：[]，
注释标题：“
}     
onChangeTitle=（e）=>{
这是我的国家({
注释标题：e.target.value
});   
}
onSubmitForm=（e）=>{
让{id，noteList，noteTitle}=this.state；
e、 预防默认值（）；
this.setState（（prevState）=>({
id:prevState.id+1
})); 
if（localStorage.getItem（“状态”）！=null）{
noteList.push({
id:id，
noteTitle:localStorage.getItem（“状态”）
});
}
noteList.push({
id:id，
noteTitle:noteTitle
});
localStorage.setItem（“状态”，
noteList.map（用户=>{
返回(
user.noteTitle
)
})
); 
} 
render（）{
const{notetTitle，noteContent}=this.state；
返回(
而不是巴伊尔ııı：
{localStorage.getItem（“状态”）}
{/*  */}
) 
}
}

在

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.

}