Попытка автоматического запуска метода без нажатия пользователем кнопки

Question

    {!this.props.account ? (
           <button onClick={this.props.onSignIn}>Sign In</button>
      ) : (
    // Otherwise show the homepage

Замена onClick способом, позволяющим просто вызвать this.props.onSignIn только один раз.

Пользователю не нужно нажимать кнопку для входа, но после загрузки страницы , он должен просто проверить, аутентифицирован ли пользователь, а если нет, то запустить метод onSignIn только один раз

Есть мысли?

Answer 1

componentDidMount - это ловушка жизненного цикла для запуска кода один раз после монтирования:

componentDidMount() {
  if (!this.props.account) {
    this.props.onSignIn()
  }
}

Answer 2

Если вы используете Hooks, useEffect - это то, что вы ищете.

useEffect(() => {
  if(!this.props.account) {
    this.props.onSignIn();
  }
}, [])

Обратите внимание на второй аргумент useEffect, он принимает набор зависимостей при изменениях этих зависимостей. хук useEffect снова запустится.

Поскольку мы ничего не передаем (пустой массив), хук будет работать только один раз при монтировании компонента.

Подробнее о хуках: https://reactjs.org/docs/hooks-effect.html