Javascript await 函数返回一个promise，即使条件为假也返回true ｜react 功能组件

发布于05月23日

在我的JSX文件中，我有这样一个函数.

async isPresent () {
    const res = await AsyncFunction();
    if (res) {
        return true;
    }
    return false;
}

然后在条件渲染中使用它作为

{  this.isPresent() &&  <div> Content </div> }

但这始终是真的.

如何解决此问题？

推荐答案

您可以执行以下操作:

const [isPresentResult, setIsPresentResult] = useState(false);

useEffect(() => {
  this.isPresent().then(res => setIsPresentResult(res))
}, [])

// ...
{ isPresentResult &&  <div> Content </div> }

使用类组件:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isPresentResult: false };
  }

  componentWillMount = () => {
    this.isPresent().then((isPresentResult) => 
      this.setState({ isPresentResult }));
  };

  async isPresent() {
    const res = await AsyncFunction();
    return !!res;
  }

  render() {
    return {this.state.isPresentResult && <div> Content </div>};
  }
}