Question

我正在尝试在页面加载之前在组件props上调用一个方法。为了测试，我创建了一个按钮来调用该方法，但这不是我所想要的，而且我不知道如何更改它，因此在到达此路径时将立即调用它。

我当前的代码：

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>

    )
  }
}

我曾考虑过通过render方法调用getTableData，但是render应该是纯净的，因此它不起作用。（{Table组件正在通过此方法更新的状态填充）

Answer 1

为此，您可以使用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的调用将在首次渲染此组件后立即触发。有关此生命周期方法的更多详细信息，请参见here。

Answer 2

如果按原样将方法传递给处理程序，则在严格模式下使用该方法将是窗口对象或未定义：

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)}

Answer 3

这怎么了？

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>

    )
  }
}

反应如何调用道具

3 个答案: