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

就像在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;
  }
};

Answer 2

由于它是异步操作，因此不能使其仅返回布尔值。您也可以使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() {
    // ...
  }
}

检查空对象并返回布尔值

2 个答案: