使用Redux时React笔记应用NoteItem组件CSS样式失效问题

问题可能的原因 #

• Redux存储的笔记数据结构错误：检查addNote对应的reducer逻辑，确认存入Redux的每一条笔记都是包含text、date属性的对象，避免出现存储值为空、undefined、或者嵌套层级错误的情况。特别注意reducer中是否正确读取了addNote的payload，不要把整个action对象存入数组。如果NoteItem拿到的text是非法值（比如对象、数组），渲染时会出现不可预期的文本长度，破坏flex布局的高度分配。
• 笔记列表渲染逻辑错误：检查渲染NoteItem列表的父组件代码：
  • 确认所有NoteItem组件的直接父容器是设置了grid布局的.notes-list，不要给每个NoteItem外层额外套无样式的div（React Fragment除外），否则会破坏grid的自动分配规则
  • 确认没有把NewItem组件的结构意外存入Redux的笔记列表中重复渲染
• 样式覆盖问题：检查接入Redux后是否有额外的全局样式被引入，或者有没有优先级更高的选择器覆盖了.note的min-height、flex相关属性。可以打开浏览器控制台的元素检查器，选中异常的笔记卡片，查看.note的样式是否被正常应用。
• 列表key值异常：如果渲染列表时没有给每个NoteItem设置唯一的key值，或者key值出现重复，可能导致React虚拟DOM diff异常，出现样式错乱的问题，建议用笔记的唯一ID（不要用数组索引）作为key值。

快速排查步骤 #

1. 打开浏览器控制台，打印Redux中存储的笔记数组，确认每条数据的结构符合预期
2. 检查异常卡片的DOM结构，确认和硬编码文本时的DOM结构完全一致
3. 临时注释掉Redux相关逻辑，用本地模拟的数组渲染列表，确认是否能恢复正常样式

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