useState传入async函数致todos.map报undefined is not a function如何解决？

1. useState不支持异步初始化函数：你给useState传了async函数，async函数执行后返回的是Promise实例，不是你预期的待办数组，初始状态下todos的值是Promise，没有map方法。
2. 空数组判断逻辑错误：你用todos === []判断空数组，JavaScript中数组是引用类型，该判断永远返回false，即使todos是空数组也不会走兜底渲染逻辑，直接执行map触发报错。

1. 调整todos初始化逻辑
   直接给useState传入空数组作为初始值，异步拉取本地存储的逻辑放到useEffect中，组件挂载完成后执行：

// 初始化直接给空数组
const [todos, setTodos] = useState([]);

// 组件挂载后拉取本地存储数据
useEffect(() => {
  _retrieveData();
}, []);

2. 修正渲染判断逻辑
   用可选链+长度判断替代原有的错误判断，兼容undefined和空数组两种场景：

{!todos?.length ? (
  <View>
    <Text>添加一个待办事项吧！</Text>
  </View>
) : (
  todos.map((todo, idx) => (
    // 原有渲染逻辑保持不变
  ))
)}

3. 优化addItem中的异步调用写法
   原代码中_storeData(newTodos).then(_retrieveData())会立即执行_retrieveData，不会等待存储完成，调整为：

_storeData(newTodos).then(() => _retrieveData());
// 也可以直接先更新state再存储，减少一次读取操作，性能更好：
// setTodos(newTodos);
// _storeData(newTodos);

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