reactjs - React Native(Expo) SecureStore getItemAsync

Question

我正在使用“expo-secure-store”来存储 JWT 令牌。当我尝试首先获取数据时，它什么都不返回，然后是令牌。

我的代码：

const [api, ApiReply] = React.useState("");
const [isLoading, setLoading] = useState(true);

const [token, setToken] = React.useState("");

const clickHandler = () => {
    
    SecureStore.getItemAsync("secure_token").then((token) => setToken(token));
    console.log(token);
    
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer " + token);
    
    var requestOptions = {
        method: "GET",
        headers: myHeaders,
    };

    fetch("http://193.119.10.206:3000/auth/user/8", requestOptions)
        .then((response) => response.text())
        .then((result) => ApiReply(JSON.parse(result)))
        .catch((d) => {
            alert("500");
        })
        .finally(() => setLoading(false));

};


React.useEffect(() => { 
    clickHandler();
}, [api])

渲染时我需要令牌。有什么解决方案或替代方法吗？

标签： reactjsreact-nativeexpo

Answer 1

您可以通过三种方式执行此操作：

1. 将所有东西移到then封闭内。这将等待您的 get async 函数完成，然后再对令牌执行任何操作。

    const clickHandler = () => {   
      SecureStore.getItemAsync("secure_token").then((token) => {
        setToken(token);
        console.log(token);
        var myHeaders = new Headers();
        myHeaders.append("Authorization", "Bearer " + token);
        var requestOptions = {
            method: "GET",
            headers: myHeaders,
        };
        fetch("http://193.119.10.206:3000/auth/user/8", requestOptions)
         .then((response) => response.text())
         .then((result) => ApiReply(JSON.parse(result)))
         .catch((d) => {
           alert("500");
         })
         .finally(() => setLoading(false));
         });
     };
   

2. 改用await：

    const clickHandler = async () => {
    const token = SecureStore.getItemAsync("secure_token");
    setToken(token);
    console.log(token);
   
    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer " + token);
   
    var requestOptions = {
        method: "GET",
        headers: myHeaders,
    };
   
    fetch("http://193.119.10.206:3000/auth/user/8", requestOptions)
        .then((response) => response.text())
        .then((result) => ApiReply(JSON.parse(result)))
        .catch((d) => {
            alert("500");
        })
        .finally(() => setLoading(false));
   

   };

3. 利用 useEffect：

    const clickHandler = ()=>{
       SecureStore.getItemAsync("secure_token").then((token) => setToken(token));
    }
   

   useEffect(()=>{ if(token !== null) { //call fetch } },[token])