Я пытаюсь вызвать метод на подпорки компонента до загрузки страницы. Для тестирования я создал кнопку для вызова метода, но это не то, чего я хочу, и я не знаю, как изменить его, чтобы он вызывался мгновенно, когда вы достигнете этого пути.

Мой текущий код:

class BrokersList extends React.Component {
  getTableData = () => {
    this.props.getBrokerDetails()
  }

  render () {
    return (
      <Paper className={this.props.classes.root}>
        <button 
                variant="outlined" 
                color="primary" 
                onClick={this.getTableData}></button>

          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}

Я думал о вызове getTableData через метод рендеринга, но рендер должен быть чистым, чтобы он не работал. (Компонент Table заполняется из состояния, которое обновляется этим методом)

0
Yossi 20 Авг 2018 в 18:17

3 ответа

Лучший ответ

Для этого вы можете использовать метод жизненного цикла componentDidMount.

Вот пример кода того, что может работать для вас.

class BrokersList extends React.Component {
  componentDidMount() {
    this.props.getBrokerDetails()
  }

  render () {
    return (
      <Paper className={this.props.classes.root}>
          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}

Теперь ваш вызов getBrokerDetails сработает сразу после первого рендеринга этого компонента. См. здесь для получения дополнительной информации об этом методе жизненного цикла.

4
Yossi 20 Авг 2018 в 15:28

Если вы передадите метод обработчику, который использует это, он будет объектом окна или не определен, если используется в строгом режиме:

class BrokersList extends React.Component {
  getTableData = () => {
    this.props.getBrokerDetails()
  }

  render () {
    return (
      <Paper className={this.props.classes.root}>
        <button 
                variant="outlined" 
                color="primary" 
                onClick={() => this.getTableData()}></button>

          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}

Или используя onClick={this.getTableData.bind(this)}

0
jcubic 20 Авг 2018 в 15:24

Что в этом плохого?

class BrokersList extends React.Component {
  render () {
    // get method props
    const {getBrokerDetails} = this.props
    return (
      <Paper className={this.props.classes.root}>
        <button 
                variant="outlined" 
                color="primary" 
                onClick={getBrokerDetails}></button>
                {/* call the method ^^ */}

          {this.props.details.length > 0 && <Table {...this.props}/>}
      </Paper>

    )
  }
}
0
Bhojendra Rauniyar 20 Авг 2018 в 15:27
51933835