使用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

您不能像这样异步返回jsx。 我会建议修改最后then以类似如下：

.then(data => this.setState({ data }));

您可以将默认data设置为空数组，因此您不必担心映射。

class Button extends React.Component {
  state = { data: [] };
}

然后，更改渲染以响应state

render() {
  return (
    <ul>
      {data.map(d => <li>{d}</li>)}
    </ul>
  );
}

为了说明，这是过程：

• onClick进行异步调用以加载数据
• 加载数据时，它将状态更新为新数据。
• 更改状态将导致调用使用新状态进行render 。

Answer 2

这是我的建议：

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) 。 我们将其绑定到组件的上下文。

Answer 3

您的handleClick方法只是一个事件处理程序，这意味着当您单击按钮时将触发它，但实际上不呈现任何内容。 因此，在此处返回列表不会执行任何操作。

而是与用户一起更新您的状态，并与按钮分开呈现它们。 例如：

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});
  })
  .catch(function(error) {
    console.log(error);
  });
}

render(){
    return (
      <div>
        <button onClick={this.handleClick}>Get All Users</button>
        {this.state.users.length > 0 &&
          <ul>
            {this.state.users}
          </ul>
        }
      </div>
    );
  }
}

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

Answer 4

handleClick（）方法不应返回您的结果，因为它不会对其执行任何操作，因此应更新状态变量，该状态变量又将更新渲染逻辑

以下有关如何更新点击的简短示例：

（您可以通过jsbin运行/编辑此示例： http ://jsbin.com/vumaqam/edit?html,js,output）

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

  handleClick(){
    console.log("clikc");
    this.setState({users:["joe","smith"]});
  }


  getList(){
    // key must be unique, if user name is not unique must use other key
    return this.state.users.map((user)=>(<li key={user}>{user}</li>));
  }

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

React.render(
  <Button />,
  document.getElementById('react_example')
);