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

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

0 голосов
/ 17 июня 2020

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

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;

1 Ответ

2 голосов
/ 17 июня 2020

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

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

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

, используйте timeout вот так: 

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