React项目使用AsyncStorage时useEffect调用函数报is not a function错误如何解决？

问题原因 #

• 核心原因多为函数定义顺序错误：你用const声明的两个存储函数如果写在useEffect调用的后方，const声明不存在变量提升，执行useEffect回调时这两个函数还未完成初始化，值为undefined，调用时就会抛出not a function的错误。
• 次要逻辑问题：第一个useEffect中的getTodosFromUserDevice没有加执行括号，就算函数定义正常，此处也只会引用函数本身，不会触发读取本地存储的逻辑。

修复方案 #

调整代码顺序，将两个存储函数的定义移到所有useEffect调用的前方，同时补全函数执行括号即可：

// 第一步：先定义存储相关函数
const saveTodoToUserDevice = async todos => {
  try {
    const stringifyTodos = JSON.stringify(todos);
    await AsyncStorage.setItem('todos', stringifyTodos);
  } catch (error) {
    console.log(error);
  }
};

const getTodosFromUserDevice = async () => {
  try {
    const todos = await AsyncStorage.getItem('todos');
    if (todos != null) {
      setTodos(JSON.parse(todos));
    }
  } catch (error) {
    console.log(error);
  }
};

// 第二步：再编写useEffect逻辑
React.useEffect(() => {
    // 补全函数执行括号
    getTodosFromUserDevice();
}, []);

React.useEffect(() => {
    saveTodoToUserDevice(todos);
}, [todos]);

如果你的存储函数定义在组件外部，额外检查下导出、导入语句的拼写是否正确，是否存在大小写不匹配的问题。

内容的提问来源于stack exchange，提问作者It's me shaza