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

【问题标题】：pass token using useEffect and AsyncStorage in React Native在 React Native 中使用 useEffect 和 AsyncStorage 传递令牌
【发布时间】：2021-04-28 16:54:59
【问题描述】：

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

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

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])

【问题讨论】：

标签： reactjs react-native asynchronous asyncstorage

【解决方案1】：

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

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

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

【讨论】：

【解决方案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();
         //...
      }
    })();
}, [])

【讨论】：