React简易笔记应用状态异常：修改输入标题同步所有历史笔记标题

问题现象 #

开发React笔记应用时，每个笔记包含标题与文本。当前遇到的问题是：每次修改标题输入框内容时，所有已添加的历史笔记标题都会同步变更，但文本输入功能正常。

问题原因 #

核心问题在于存储历史笔记的result数组仅保存了笔记文本，未关联对应标题，渲染历史笔记时，所有NotesList组件都直接引用了当前状态note.title，而非每个笔记创建时的独立标题：

• addNote函数仅将带日期的文本存入result，完全没有保存标题信息
• 渲染列表时，noteTitle传递的是当前输入框绑定的note.title状态值，所有历史笔记共享同一个状态

解决方案 #

修改存储逻辑，让result数组保存完整的笔记对象（包含标题、文本），确保每个笔记拥有独立的标题数据：

修改后的关键代码 #

1. 调整addNote函数，存储完整笔记对象

function AddNotesComponent() {
  const [result, setResult] = useState([]);
  const [note, setNote] = useState({title:'',text:''});

  const addNote = () => {
    if (!note.text) return;
    // 创建包含标题、文本和日期的完整笔记对象
    const newNote = {
      title: note.title || '无标题', // 处理标题为空的情况
      text: `${note.text}(${settingDate()})`
    };
    setResult([...result, newNote]);
    // 添加后清空输入框
    setNote({title:'', text:''});
  };

  const HandleTitle = (e) => setNote({...note,title: e.target.value});
  const HandleText = (e) => setNote({...note,text: e.target.value});

2. 渲染列表时，从每个笔记对象中取对应标题

return (
  <>
    {/* 输入框部分保持不变 */}
    <div className='notebox'>
      <input style={{ width: '425px', marginTop: '5px' }} onChange={HandleTitle} placeholder='title' />
      <textarea style={{ width: '425px', marginTop: '15px' }} onChange={HandleText} placeholder='your note...' />
      <button className='addbutton' onClick={addNote}>Add</button>
    </div>
    {/* 修改列表渲染逻辑 */}
    <div className='resultdiv'>
      {result.map((item, index) => (
        <NotesList
          key={index}
          noteIndex={index}
          noteTitle={item.title} // 从当前笔记对象获取标题
          noteText={item.text}
          deleteHandler={closeNoteHandle}
        />
      ))}
    </div>
  </>
);

效果验证 #

修改后，添加笔记时会将标题与文本绑定存储，每个历史笔记的标题都是独立的，修改输入框的标题只会影响当前未添加的笔记，不会同步变更历史笔记的标题。

内容的提问来源于stack exchange，提问作者Mateus Rosengarten Mauricio