Условный рендеринг, время ожидания Недопустимый вызов ловушки React

Question

Если проверка верна, я хочу отобразить кнопку Далее. Я получаю такие ошибки, как неожиданный токен, недопустимый вызов ловушки. Пожалуйста, помогите мне. Заранее спасибо.

import React from "react";
import useTimeout from "use-timeout";

class App extends React.Component {
  state = { check: true };

  handleCheck = () => {
    this.setState({ check: !this.state.check });
  };
  render() {
    useTimeout(() => {
      this.handleCheck();
    }, 10000);
    return (
      <div>
      {
       if(this.state.check){
        return <button>Next</button> 
      }
     }
      </div>
    );
  }
}
export default App;

Answer 1

Сделайте это вместо этого:

<div> {this.state.check && <button>Next</button> </div>

и удалить useTimeoutон вам не нужен, и вы НЕ МОЖЕТЕ использовать его как ловушку, и вы используете компонент класса. Вы должны вызвать егоonClick вместо этого или если вы настаиваете на использовании тайм-аута, используйте setTimeout но я бы не советовал использовать это внутри рендера

использовать timeout как это:

componentDidmount() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000); 
}