Reputation: 713
Inside submitButton event, I would like to check if there are any users registered or not.
Suppose there are 5 users registered:
getUsers = function () {
return new Promise(function (resolve, reject) {
resolve(5);
reject(0);
});
}
Inside the checkregisteredUsers, I call getUsers and then I check if there are any users. If there are any users, then return true, otherwise false. I set state of UsersFound.
checkRegisteredUsers = () => {
return this.getUsers().then(result => {
return this.setState({ UsersFound: result > 0 ? true : false };
}).catch(reason => {
console.log(reason);
});
}
Now, inside the function submitButton, I would like to check for true or false, if there were users registered.
submitButton = () => {
this.checkRegisteredUsers().then(result => {
this.setState({ UsersFound: result > 0 ? true : false });
});
if(!this.state.UsersFound){
return; **//exit code here and the rest of the code below should not execute and show the dialog box**
}
// run some other code
}
When I call submitButton, the state of UsersFound is not set yet. If I click a second time then it is set. How can I set it inside a promise? Or How can I check for true/false inside the submitButton using promises?
EDIT:
The question is: how can I return a boolean from a promise as I would like to check something like this:
submitButton = () => {
if(this.checkRegisteredUsers()){
return; //the rest of the code below should not execute
}
//if check users is true then the code below should not execute
// some other code
}
I don't want a promise returned, I want a boolean.
Upvotes: 1
Views: 11745
Reputation: 2008
Long story short: You cannot make a function that returns a promise return a boolean. If you have some asynchronous action (like a fetch to get users from some service), that is inherently asynchronous. You cannot have such a function return a boolean, because by the time the function itself ends, you don't have the information to return true or false.
The closest you can get to that is using async/await. But async functions still only return Promise
objects. You can make it look different using async/await, but it is just syntactic sugar. You are still effectively running all of the code after the await
as though it were a function passed to then
.
As an example, this:
//Some function that will resolve or reject.
const getUsers = () {
return new Promise(function (resolve, reject) {
resolve(5);
});
}
const foundUsers = async () => {
const users = await getUsers();
return Boolean(users);
}
const LoggedIn = () => {
const [usersFound, setUsersFound] = useState(false)
const onSubmit = async () => {
const found = await foundUsers();
if (found) {
//do stuff
}
setUsersFound(found)
}
return (
<>
<button onClick={onSubmit}>Submit</button>
{ usersFound ? <Dialog /> : <WhateverElse /> }
</>
)
}
Is the same as this:
const LoggedIn = () => {
const [usersFound, setUsersFound] = useState(false)
const onSubmit = () => {
foundUsers().then((found) => {
if (found) {
//do stuff
}
setUsersFound(found)
})
}
return (
<>
<button onClick={onSubmit}>Submit</button>
{ usersFound ? <Dialog /> : <WhateverElse /> }
</>
)
}
Upvotes: 2