Javascript 使用React.js显示列表

我正在尝试编写一个非常简单的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"));

从“React”导入React；
从“react dom”导入react dom；
类按钮扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：[]
};
}
handleClick（）{
取回（“http://localhost:8080/api/user/")
。然后（结果=>{
返回results.json（）；
})
。然后（数据=>{
让用户=data.map（（用户）=>{
console.log（“user-”，user.name）；
返回(
{user.name}
);
})
//this.setState（{users:users}）；
返回(
{用户}
);
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
获取所有用户
);
}
}
render（，document.getElementById（“根”））；

您的

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"));

从“React”导入React；
从“react dom”导入react dom；
类按钮扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：[]
};
}
handleClick（）{
取回（“http://localhost:8080/api/user/")
。然后（结果=>{
返回results.json（）；
})
。然后（数据=>{
让用户=data.map（（用户）=>{
console.log（“user-”，user.name）；
返回(
{user.name}
);
})
this.setState（{users:users}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
返回(
获取所有用户
{this.state.users.length>0&&

{this.state.users}

}
);
}
}
render（，document.getElementById（“根”））；

handleClick（）方法不应返回结果，因为它对结果没有任何作用，所以应该更新一个状态变量，该变量反过来更新渲染逻辑

下面的简短示例介绍了如何在单击时更新：

（您可以通过jsbin:运行/编辑此示例）

class按钮扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={users:[]}；
}
handleClick（）{
控制台日志（“clikc”）；
this.setState（{用户：[“joe”，“smith”]}）；
}
getList（）{
//密钥必须是唯一的，如果用户名不唯一，则必须使用其他密钥
返回这个.state.users.map（（user）=>（
{user}
）；
}
render（）{
报税表（
{this.handleClick（）}}>获取所有用户
{this.getList（）}
);
}
}
反应(
,
document.getElementById（'react\u example'）
);

您不能像那样异步返回jsx。我建议将最终的

修改为如下内容：

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

您可以将默认的
数据
设置为空数组，这样就不必担心映射问题

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

然后，更改渲染以响应
状态

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

render（）{
返回(

{data.map（d=>
{d}
）}

);
}

为了解释，以下是过程：


onClick
进行加载数据的异步调用
加载数据时，它会将状态更新为新数据
更改状态将导致使用新状态调用
render
以下是我的建议：

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"));

从“React”导入React；
从“react dom”导入react dom；
函数getData（回调）{
取回（“http://localhost:8080/api/user/")
。然后（结果=>{
返回results.json（）；
})
.然后（回调）；
}
类按钮扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
数据：空
};
}
handleClick（）{
this.props.getData（data=>this.setState（{data}））；
}
_渲染器（）{
返回(
{ 
this.state.data.map（user=>
{user.name}
）
}
);
}
render（）{
返回(
获取所有用户
{this.state.data&&this.\u renderUsers（）}
);
}
}
render（，document.getElementById（“根”））；


首先，我认为
fetch
应该在React组件之外。React只是关于呈现数据，而不是进行ajax调用。在上面的代码中，
getData
是一个作为prop传递的外部函数
该组件不再具有异步逻辑，它呈现处于该状态的内容。最初的
数据
为空，之后由API中的数据填充。
setState
触发重新渲染
在您的示例中，
handleClick
在没有上下文的情况下运行，因此在内部您可能无法执行
this.setState
。这就是为什么我们在构造函数中执行
this.handleClick=this.handleClick.bind（this）
。我们将其绑定到组件的上下文
谢谢克拉西米尔。你提出的解决方案奏效了。感谢您解释为什么
this.setState
为空，这让我在调试时感到困惑
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"));