React Native中useEffect内调用AsyncStorage.getItem报错，求排查

架构老林

2026-8-6

React Native中useEffect调用AsyncStorage.getItem报错问题

问题描述

在React Native项目的Pregent_login组件中，在useEffect钩子内调用AsyncStorage.getItem('token')时出现报错，相关代码如下：

export default function Pregent_login(props) {
  const [first, setfirst] = useState();
  useEffect(() => {
    console.log('route.params ==>', props.route.params);

     const value = AsyncStorage.getItem('token');
     setfirst(value);
  }, []);

错误原因

AsyncStorage.getItem()是异步方法，它返回的是一个Promise对象，而非直接的token字符串值。你直接将这个Promise对象赋值给first状态，会导致后续使用该状态时出现异常，这就是报错的核心原因。

解决方法

方法1：使用async/await处理异步逻辑

将useEffect的回调内定义异步函数，通过await获取实际的token值：

export default function Pregent_login(props) {
  const [first, setfirst] = useState();
  useEffect(() => {
    console.log('route.params ==>', props.route.params);
    
    const getToken = async () => {
      try {
        const value = await AsyncStorage.getItem('token');
        setfirst(value);
      } catch (error) {
        console.error('获取token失败:', error);
      }
    };

    getToken();
  }, []);

方法2：使用Promise链式调用

通过then/catch处理异步结果和错误：

export default function Pregent_login(props) {
  const [first, setfirst] = useState();
  useEffect(() => {
    console.log('route.params ==>', props.route.params);
    
    AsyncStorage.getItem('token')
      .then(value => {
        setfirst(value);
      })
      .catch(error => {
        console.error('获取token失败:', error);
      });
  }, []);