React Native应用启动时无法显示AsyncStorage存储笔记求助

嘿，我仔细看了你的代码，发现笔记启动时不显示的原因很明确——你在加载保存的笔记时没有正确触发React的组件重新渲染，而且异步操作的时机也有点问题。咱们一步步来修复：

核心问题分析 #

• 直接修改state不触发渲染：在getSavedNotes里你直接写this.state.noteArray = JSON.parse(data)，React不会监测到这种直接修改state的操作，所以组件不会重新渲染，自然看不到保存的笔记。只有当你输入字符触发setState时，组件才会重新渲染，这时候修改后的数组才会显示出来。
• 异步方法调用时机不对：你在constructor里调用getSavedNotes，但constructor是组件初始化阶段，这时候异步操作完成后更新state也可能不会触发渲染，而且你还传了个没用的参数。
• state更新不符合不可变性原则：你直接用push、splice修改state里的数组，虽然有时候能工作，但这不是React推荐的方式，容易导致不可预测的bug。

具体修复步骤 #

1. 修复getSavedNotes方法，用setState更新state #

把直接修改state的代码改成调用setState，这样React才会知道state变了，需要重新渲染组件：

getSavedNotes = async () => {
  try {
    let data = await AsyncStorage.getItem('arr');
    // 先判断data是否存在，避免JSON.parse(null)抛出错误
    if (data) {
      const savedNotes = JSON.parse(data);
      this.setState({ noteArray: savedNotes });
    }
  } catch (error) {
    alert(error);
  }
}

2. 把加载笔记的操作移到componentDidMount #

constructor不适合执行异步操作，componentDidMount是组件挂载完成后第一个适合执行异步逻辑的生命周期钩子，在这里调用加载方法更可靠：

constructor(props){
  super(props);
  this.state = {
    noteArray: [],
    noteText: '',
  };
  // 删掉原来的this.getSavedNotes调用
}

componentDidMount() {
  // 组件挂载后加载保存的笔记
  this.getSavedNotes();
}

3. 优化addNote方法，遵循state不可变性 #

不要直接修改state里的数组，而是创建新数组，并且把AsyncStorage的保存操作放在setState的回调里（因为setState是异步的，这样能确保保存的是最新的数组）：

addNote() {
  // 加个trim避免保存空笔记
  if (this.state.noteText.trim()) {
    const d = new Date();
    const newNote = {
      date: `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`,
      note: this.state.noteText.trim()
    };
    // 用扩展运算符创建新数组，不修改原state数组
    const newNoteArray = [...this.state.noteArray, newNote];
    this.setState({ 
      noteArray: newNoteArray,
      noteText: '' 
    }, () => {
      // setState完成后再保存到AsyncStorage
      AsyncStorage.setItem('arr', JSON.stringify(newNoteArray));
    });
  }
}

4. 同样优化deleteNote方法 #

deleteNote(key) {
  // 用filter创建新数组，过滤掉要删除的项
  const newNoteArray = this.state.noteArray.filter((_, index) => index !== key);
  this.setState({ noteArray: newNoteArray }, () => {
    // 删除后同步保存到AsyncStorage
    AsyncStorage.setItem('arr', JSON.stringify(newNoteArray));
  });
}

修改后的效果 #

这样调整后，应用启动时会自动加载保存的笔记并渲染出来，添加和删除笔记也会正确同步到AsyncStorage，而且遵循了React的state更新原则，减少了潜在的bug。

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