Условный рендеринг при нажатии ручки - PullRequest
Новая
       57

Условный рендеринг при нажатии ручки

0 голосов
/ 26 мая 2020

здесь нужна помощь в условном рендеринге. Итак, у меня есть объект user (изначально null) и флаг fetchingUser (изначально ложный) в состоянии redux. Когда нажимается кнопка, я хочу показать выборку пользователя ..... и после этого данные пользователя, такие как <h1>{this.props.user.name}</h1>

Прямо сейчас у меня есть кнопка, но я не знаю как мне сделать выше. 

import React, {Component} from 'react'
import {connect} from 'react-redux'
import { fetchUserFromGithub } from './actions'

class App extends Component {

  handleClick = () => {
    this.props.dispatch(fetchUserFromGithub())
  }

  render() {
    return (
        <button 
          onClick={this.handleClick}>Get Info
        </button>
    )
  }
}

const mpaStateToProps = state => {
  return {
    fetchingUser: state.users.fetchingUser,
    user: state.users.user
  }
}

export default connect(mpaStateToProps)(App)

1 Ответ

0 голосов
/ 26 мая 2020 
class App extends Component {
    handleClick = () => {
        this.props.dispatch(fetchUserFromGithub());
    };

    render() {
        const { user, fetchingUser } = this.props;

        if (fetchingUser) {
            return <span>Loading...</span>;
        }

        return user ? <h1>{user.name}</h1> : <button onClick={this.handleClick}>Get Info</button>
    }
}
...