反应：如何从异步 function 中保存价值并稍后使用

Question

I have an async function that calls an api getting me the current role of a user. Later on I want to attach that role to a variable. Here's my code

const getRole = async () => {
        const response = await roleService.getRole();
        const roles = await response.role
        return roles
    }
     ...........

 const currentRole = getRole() //I want this to be the value from return roles

I'm new to react and having trouble with this. How can I set currentRole to the value in return roles ?

Answer 1

I would opt to save the information that you got from the API on a state

const [roles, setRoles] = useState();

const getRole = async () => {
        const response = await roleService.getRole();
        const roles = await response.role
        setRoles(roles);
    }

you can call the gerRole function on a useEffect like this

useEffect(() => {
getRole();
}, []);

or you can call the getRole function on a button click

<button onClick={getRole}>Click me to get roles</button>