检查空对象并返回布尔值

Question

我有一个AddContactForm 表单，允许用户添加contacts。

当用户填写conactNumber-onBlur 时，它会检查这个conactNumber 是否已经存在。

如何使CheckIfContactExists 函数返回true 或false 而不是promise 对象？

请注意，我无法更改 api 的返回值，它只返回一个 contact 对象。

export default class AddContactForm extends Component {
  state = {
   ...
  };

  checkContact = () => {
    const { contactNumber } = this.state.newContactInfo;
    CheckIfContactExists(contactNumber); //return promise
  };

 render() {
   ...
    return (  
       ...
   );
  }
}

const CheckIfContactExists = async searchString => {
  const { data: contactsInfo } = await axios.get(`api/Contacts/SearchContact?contactNum=${searchString}`);
};

Answer 1

你不能让它只返回一个布尔值，因为它是一个异步操作。您也可以将checkContact 函数设为async 和await。

示例

export default class AddContactForm extends Component {
  state = {
   // ...
  };

  checkContact = async () => {
    const { contactNumber } = this.state.newContactInfo;
    const contactInfo = await CheckIfContactExists(contactNumber);

    this.setState({
      contactNumberTaken: Object.keys(contactInfo).length !== 0
    });
  };

  render() {
    // ...
  }
}

Answer 2

就像在CheckIfContactExists 中一样，在 checkContact 中使用异步等待。还从CheckIfContactExits 方法返回布尔结果

export default class AddContactForm extends Component {
  state = {
   ...
  };

  checkContact = async () => {
    const { contactNumber } = this.state.newContactInfo;
    try {
      const res = await CheckIfContactExists(contactNumber); 
      return res;
    } catch (e) {
       console.log('Error', error);
    }
  };

 render() {
   ...
    return (  
       ...
   );
  }
}

const CheckIfContactExists = async searchString => {
  const { data: contactsInfo } = await axios.get(`api/Contacts/SearchContact?contactNum=${searchString}`);
  if (Object.keys(contactsInfo).length > 0) {
     return true;
  } else {
      return false;
  }
};