React点击发送按钮更新页面时notes数组始终为空问题

你遇到的notes数组始终为空的问题，核心是违反了React状态管理的基础规则，具体问题点如下：

• notes 被声明为普通局部变量，没有交给React状态管理：React函数组件每次触发重渲染（调用setNote/setSendingScreen都会触发重渲染）时，函数内部所有普通变量都会重新执行初始化逻辑，你写的let notes = []会在每次重渲染时把数组重置为空，之前push进去的内容会直接丢失。
• 直接用push修改数组的写法不符合React更新要求：就算你避开了重渲染重置的问题，直接修改普通变量/原state值的操作不会被React感知，根本不会触发对应的视图更新，你写的notes.map逻辑自然不会渲染新内容。
• 额外的小问题：你给所有笔记项都设置了相同的id='single-note'，HTML规范要求id全局唯一，而且列表渲染缺少React要求的唯一key属性，运行时会抛警告，极端情况会出现渲染错乱。

1. 把notes改为state管理，替换原来的普通变量声明：

// 把 let notes = []; 替换为下面的代码
const [notes, setNotes] = useState([]);

2. 修改点击按钮的回调逻辑，用不可变更新的方式修改notes状态，不要直接push：

function afterButtonClick(event) {
  // 基于原有notes生成新数组，把当前输入的note追加到末尾
  setNotes(prevNotes => [...prevNotes, note]);
  // 可选：提交后清空输入框
  setNote('');
  setSendingScreen((prev) => !prev)
}

3. 修改列表渲染逻辑，补上唯一key，去掉重复id：

{ 
  notes.map((singleNote, index) => { 
    return (<p key={`note-${index}`} className='note'>{singleNote}</p>)
  })
}

• 所有需要在多次重渲染之间保留、修改后需要触发视图更新的数据，必须用useState/useReducer等React官方提供的状态API管理，普通局部变量仅能用于单次渲染内的临时计算，存不住跨渲染周期的数据。
• 状态更新必须遵循不可变更新原则：禁止直接修改原state的值（比如对state数组直接push/pop、直接修改state对象的属性），必须生成一个全新的副本传给状态更新函数，React才能检测到状态变化触发重渲染。
• 数组遍历渲染元素时，必须给每一项设置全局唯一的key属性，帮助React精准识别元素变化，避免渲染错位问题。

内容的提问来源于stack exchange，提问作者AoXNeR