React.js开发问题：点击按钮调用API后无法渲染用户列表

嘿，我一眼就看到问题所在啦！你的代码已经成功获取到数据并转换成了JSX元素，但没有通过React的状态管理来触发组件重新渲染，而且render方法里也没把用户列表展示出来。具体问题和修复步骤如下：

核心问题点 #

• 你注释掉了this.setState({users: users});，这是把数据同步到组件状态的关键操作，没有它React不知道数据更新了，自然不会重新渲染页面。
• 在fetch的回调里直接返回<ol>完全没用，React组件的渲染逻辑只认render方法里的返回值，必须通过更新状态让render重新执行。
• handleClick方法里的this指向有问题，class组件中类方法默认不会绑定组件实例，直接用onClick={this.handleClick}会导致调用this.setState时报错。

修复后的完整代码 #

import React from "react";
import ReactDOM from "react-dom";

class Button extends React.Component {
  constructor(props){
    super(props);
    this.state = { users : [] };
    // 绑定handleClick的this指向组件实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    fetch("http://localhost:8080/api/user/")
      .then(results => {
        return results.json();
      })
      .then(data => {
        let users = data.map((user) => {
          console.log("user - ", user.name);
          return (
            <li key={user.id}>{user.name}</li>
          );
        })
        // 把处理好的用户列表更新到state中
        this.setState({users: users});
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render(){
    return (
      <div>
        <button onClick={this.handleClick}>Get All Users</button>
        {/* 渲染state中的用户列表 */}
        <ol>{this.state.users}</ol>
      </div>
    );
  }
}

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

关键修复说明 #

1. 绑定this：在constructor里添加this.handleClick = this.handleClick.bind(this);，确保handleClick里的this指向当前组件实例，这样才能正常调用this.setState。
2. 更新状态：取消this.setState的注释，把转换好的<li>数组存到state.users中，React会自动检测状态变化并重新执行render方法。
3. 渲染列表：在render的返回值里添加<ol>{this.state.users}</ol>，这样当状态更新后，用户列表就会被渲染出来。

现在点击按钮，你应该就能看到获取到的用户列表啦！

内容的提问来源于stack exchange，提问作者Dan