在 React Native 中使用 useEffect 和 AsyncStorage 传递令牌

Question

我开始使用 React Native，应该使用 AsyncStorage 而不是 LocalStorage

但是我无法在 useEffect 和 AsyncStorage 中处理异步，因为提取后的令牌集会发送所有内容。请帮助我

const [tkn, setTkn] = useState('')

const getData = async () => {
    try {
        const value = await AsyncStorage.getItem('token')
        if(value !== null) {
            setTkn(value)
        }
    } catch(e) {
        
    }
}

useEffect(() => {
    AsyncStorage.getItem('token').then((value) => {
        if (value) {
            setTkn(value)
        }
    });


    fetch('http://127.0.0.1:8000/home', {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'Token': tkn
        }
    })
        .then(function (response) {
            if (response.status >= 200 && response.status <= 299) {
                return response.json();
            } else {

            }
        })
        .then(funds => {
            ///
        }).catch(function (error) {
            
        })
}, [history])

Answer 1

我建议创建两种效果：一种从存储中获取令牌，一种进行 API 调用。

第一个效果将在组件安装时触发（将 [] 作为 useEffect 依赖项传递），第二个将在令牌更改时触发（将 [tkn] 传递给该 useEffect，并检查确保令牌具有非空值）。

这样，您就不必担心将所有异步逻辑链接在一起。

Answer 2

useEffect(() => {
    (async()=>{
      const token = await AsyncStorage.getItem('token');
      setTkn(token);
      const response= await fetch('http://127.0.0.1:8000/home', {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'Token': token
        }
      });
      if (response.status >= 200 && response.status <= 299) {
         const json= await response.json();
         //...
      }
    })();
}, [])

在 React Native 中使用 useEffect 和 AsyncStorage 传递令牌

pass token using useEffect and AsyncStorage in React Native

reactjs

react-native

asynchronous

asyncstorage