Question

我是ReactJS的新手，想知道函数在这里是如何工作的。我有一个类，函数和这样的渲染：

class MainTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      results: []
    };
    this.getREST = this.getREST.bind(this);
  }
  getREST() {
    console.log(this.props.str)
    axios.get(this.props.str)
      .then(res => {
        const results = res.data.results.map(obj => obj);
        this.setState({results});
    });
    console.log(this.state.results);
  }
  render() {
    return (
      <Table hover striped bordered hover responsive size="sm">
        <thead>
          <tr>
            <th>Name</th>
            <th>Name</th>
            <th>Name</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {this.state.results.map(result =>
            <tr key={result.Name}>
              <td>{result.Name}</td>
              <td>{result.Name}</td>
              <td>{result.Name}</td>
              <td>{result.Name}</td>
            </tr>
          )}
        </tbody>
      </Table>
    );
  }
}

我可以使用类似这样的按钮事件运行getRest()函数

<button onClick={this.handleClick.bind(this)} value="Click me" />

但是如何在没有任何事件的情况下运行getRest()函数，仅在render()？

Answer 1

您应该使用componentDidMount生命周期方法获取数据，而不是render。

componentDidMount(){
      axios.get(this.props.str)
      .then(res => {
        const results = res.data.results.map(obj => obj);
        this.setState({results});
    });
}

在渲染中没有事件的运行函数

1 个答案: