React Native中AsyncStorage存入数据后如何跳转到其他页面

问题根源 #

你的代码核心问题是混用async/await与Promise链式调用的写法错误，加上.then()的回调参数使用不当导致跳转逻辑执行异常：

1. .then()要求传入的是函数引用，但你直接写了Increase()、moveAround.navigate(first)，这会在setItem还没执行完的时候就同步执行这两个逻辑，异步时序完全混乱
2. 空的catch块吃掉了所有报错，你看不到AsyncStorage操作或者跳转逻辑本身的错误，比如first路由名不存在、moveAround不是合法导航对象这类问题都无法排查

修正方案（推荐async/await写法，可读性更高） #

<Button 
  title="Add now !" 
  onPress={ ()=> addtoStorage(initname, initclas, initsubject) }
/>

addtoStorage = async (par1, par2, par3) => {
  try {
    const makeObject = {
      name: par1, 
      class: par2, 
      subject: par3, 
      id: Increase.key.toString()
    };
    console.log(makeObject);
    // 等待存储操作完成
    await AsyncStorage.setItem(makeObject.id, JSON.stringify(makeObject));
    // 存储成功后按顺序执行后续逻辑
    Increase();
    // 注意路由名如果是字符串要加引号，除非你是用变量存储的路由名
    moveAround.navigate('first');
    console.log('done');
  } catch(e) {
    // 必须打印错误，方便排查问题
    console.error('操作出错：', e);
  }
}

注意事项 #

• 确认moveAround是合法的导航对象，比如是useNavigation钩子返回的实例，或者是从组件props中拿到的navigation对象
• 如果Increase()本身也是异步方法，需要在前面加await，否则逻辑时序依然会出错
• 如果你偏好Promise链式写法，需要把.then里的逻辑用箭头函数包裹，避免提前执行：

  AsyncStorage.setItem(makeObject.id, JSON.stringify(makeObject))
    .then(() => Increase())
    .then(() => moveAround.navigate('first'))
    .catch(e => console.error('操作出错：', e))
  

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