javascript - 使用 React.js 显示列表

Question

我正在尝试编写一个非常简单的 React 程序，该程序向用户显示一个按钮，在单击时调用 API 并将结果显示为列表。

我现在可以按下按钮并进行调试，我看到数据已按照我需要的方式被提取和操作，但它没有显示在屏幕上。这是我到目前为止所做的工作；

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

class Button extends React.Component {
  constructor(props){
  super(props);
  this.state = {
    users : []
  };
}

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>
      );
    })
    // this.setState({users: users});
    return (
      <ol>
        {users}
      </ol>
    );
  })
  .catch(function(error) {
    console.log(error);
  });
}

render(){
    return (
      <button onClick={this.handleClick}>Get All Users</button>
    );
  }
}

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

Answer 1

这是我的提议:

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

function getData(callback) {
  fetch("http://localhost:8080/api/user/")
    .then(results => {
      return results.json();
    })
    .then(callback);
}

class Button extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      data : null
    };
}

handleClick() {
  this.props.getData(data => this.setState({ data }));
}

_renderUsers() {
  return (
    <ol>
      { 
        this.state.data.map(user => <li key={ user.id }>{ user.name }</li>) 
      }
    </ol>
  );
}

render() {
    return (
      <div>
        <button onClick={ this.handleClick }>Get All Users</button>
        { this.state.data && this._renderUsers() }
      </div>
    );
  }
}

ReactDOM.render(<Button getData={ getData }/>, document.getElementById("root"));

• 首先我认为 fetch 应该在 React 组件之外。 React 只是关于渲染数据而不是进行 ajax 调用。在上面的代码中，getData 是作为 prop 传递的外部函数。
• 该组件不再有异步逻辑，它呈现状态中的内容。最初 data 为 null，后来填充了来自 API 的数据。 setState 触发重新渲染。
• handleClick 在您的示例中是在没有上下文的情况下运行的，因此在内部您可能无法执行 this.setState。这就是我们在构造函数中执行 this.handleClick = this.handleClick.bind(this) 的原因。我们将其绑定(bind)到组件的上下文。