使用useEffect时React状态不更新问题排查

你的代码存在几个关键问题，导致状态不更新、页面无渲染反馈：

1. useEffect 触发逻辑错误，导致无限循环 #

你给useEffect添加了notes作为依赖项，但getNotes内部会调用setNotes修改状态，这会触发useEffect重复执行，进而再次调用getNotes，陷入无限循环。而且初始化获取笔记只需要在组件挂载时执行一次，不需要依赖notes。

修复：
将依赖改为空数组，确保仅在组件挂载时执行一次获取操作：

React.useEffect(() => {
  console.log('组件挂载，加载笔记');
  getNotes();
}, []); // 空数组表示仅挂载阶段执行

2. setState 异步特性导致存储旧数据 #

setNotes是异步操作，你在调用setNotes([...notes, event.nativeEvent.text])后立即用notes执行AsyncStorage.setItem，此时notes还是更新前的旧值，导致存储的数据始终落后一步。

修复：

• 方案一：先创建新数组，复用该数组完成状态更新和存储

onSubmitEditing={event => {
  if (event.nativeEvent.text) {
    const newNotes = [...notes, event.nativeEvent.text];
    setNotes(newNotes);
    AsyncStorage.setItem(`${id}-notes`, JSON.stringify(newNotes));
    setVisible(false);
  }
}}

• 方案二：使用函数式更新，确保拿到最新状态

onSubmitEditing={event => {
  if (event.nativeEvent.text) {
    const newNote = event.nativeEvent.text;
    setNotes(prevNotes => {
      const newNotes = [...prevNotes, newNote];
      AsyncStorage.setItem(`${id}-notes`, JSON.stringify(newNotes));
      return newNotes;
    });
    setVisible(false);
  }
}}

3. map 渲染时未返回组件 #

你的map回调使用花括号{}但未显式return组件，导致没有任何元素被渲染到页面。

修复：
要么添加return，要么改用圆括号()自动返回：

// 方式一：添加return
{notes && notes.map(note => {
  return <Note note={note} />
})}

// 方式二：用圆括号自动返回
{notes && notes.map(note => (
  <Note note={note} />
))}

4. 初始状态优化（可选） #

将初始状态从null改为[]，可以去掉notes &&的判断，让代码更简洁：

const [notes, setNotes] = React.useState([]);

渲染部分直接写：

{notes.map(note => (
  <Note note={note} />
))}

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