await function returns 一个 promise 和 returns true 即使条件为 false |反应功能组件

Question

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

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

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

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

但这总是 returns 正确。

我该如何解决这个问题？

Answer 1

你可以这样做：

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

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

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

使用 Class 组件：

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>};
  }
}

Answer 2

渲染中不能有异步逻辑。您需要将 present 布尔值提取到一个状态中，并在 componentDidMount 之类的内部进行异步调用，然后从那里更新 present 状态。

参考下面的例子：

const sleep = (delay) => new Promise(res => setTimeout(() => res(true), delay))

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      present: false,
    };
  }

  componentDidMount() {
    sleep(1000).then((res) => {
      if (res) {
        this.setState({ present: true });
      }
    });
  }

  render() {
    return <div>{this.state.present ? "Present": "Not Present"}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

await function returns 一个 promise 和 returns true 即使条件为 false |反应功能组件

await function returns a promise and returns true even if the condition is false | React Functional Component

javascript

promise

async-await

reactjs

react-functional-component