Question

class App extends React.Component {
  state = {
    isLoading: true,
    users: [],
    error: null,
    showItems: 3
  };


  fetchUsers() {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then(response => response.json())
      .then(data =>
        this.setState({
          users: data,
          isLoading: false,
        })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }

  handleClick() {
    this.setState({
      showItems: 
          this.state.showItems >= this.state.users.length ?
            this.state.showItems : this.state.showItems + 1
      })
    }

  componentDidUpdate() {
    this.handleClick();
  } 

  componentDidMount() {
    this.fetchUsers();
  }
  render() {
    const { isLoading, users, error } = this.state;
    return (
      <React.Fragment>
        <h1>Random User</h1>
        {error ? <p>{error.message}</p> : null}
        {!isLoading ? (
          this.state.users.slice(0, this.state.showItems).map(user => {
            const { username, name, email } = user;
            return (
              <div key={username}>
                <p>Name: {name}</p>
                <p>Email Address: {email}</p>
                <hr />
              </div>
            );
          })
        ) : (
          <h3>Loading...</h3>
        )}

        <button onClick={this.handleClick}>Add more</button>

      </React.Fragment>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

如何使用componentDidUpdate生命周期挂钩Reactjs逐一加载点击事件中的数据，获取数据工作正常，但点击时发生混乱

我以这种方式尝试过，不了解这将是一个更好的解决方案。请指导

此外，在这里解释它是否真的需要componentDidUpdate。预先感谢。

Answer 1

在您的情况下，在this.handleClick中调用componentDidUpdate将无限地增加this.state.showItems。您只需在this.handleClick按钮的onClick上调用Add more。

ComponentDidUpdate在更新发生后立即被调用。

单击Add More按钮后，showItems在state中递增。这将触发componentDidUpdate生命周期方法。

ComponentDidUpdate再次调用this.handleClick。现在this.handleClick将更新showItems的状态将再次触发ComponentDidUpdate。此循环将无限运行。

因此，从this.handleClick中删除componentDidUpdate。

您不需要componentDidUpdate。

此外，您需要绑定handleClick。将handleClick的声明更改为handleClick = () => {...}或在构造函数中添加以下内容：this.handleClick = this.handleClick.bind(this)

反应文档：https://reactjs.org/docs/react-component.html#componentdidupdate

生命周期componentDidUpdate如何反应点击事件

1 个答案: