Javascript 将onClick元素绑定到远程API的React组件

因此，我有一个简单的应用程序，我正在构建，并从一个示例API中提取所有数据，到目前为止，它看起来是这样的：

我正在抽取用户的数据。我现在要做的是添加一个简单的按钮，增加任何用户的荣誉计数。请注意，我在进入时尚未对特定用户进行身份验证

话虽如此，我的代码如下：

我的app.js看起来像：

import React, { Component } from 'react';
import './App.css';

import KudoList from "./components/KudoList";

import axios from "axios";

class App extends Component {

  state = {
    contacts: []
  };

  componentDidMount() {
    axios
      .get("https://kudos-devtech8-yvbvpoek.herokuapp.com/users")
      .then(response => {
        const newContacts = response.data.map(c => {
          return {
            id: c.id,
            name: c.username,
            fname: c.first_name,
            lname: c.last_name,
            kgive: c.kudos_given_count,
            kreceived: c.kudos_received_count
          };
        });

        const newState = Object.assign({}, this.state, {
          contacts: newContacts
        });

        this.setState(newState);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to our Kudo app</h1>
        </header>
        <KudoList contacts={this.state.contacts} />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“/components/KudoList”导入KudoList；
从“axios”导入axios；
类应用程序扩展组件{
状态={
联系人：[]
};
componentDidMount（）{
axios
.get（“https://kudos-devtech8-yvbvpoek.herokuapp.com/users")
。然后（响应=>{
const newContacts=response.data.map（c=>{
返回{
id:c.id，
姓名：c.username，
fname:c.名字，
名字：c.姓，
克格夫：c.荣誉，
收到：c.收到的荣誉
};
});
const newState=Object.assign（{}，this.state{
联系人：新联系人
});
this.setState（newState）；
})
.catch（错误=>console.log（错误））；
}
render（）{
返回(
欢迎使用我们的Kudo应用程序
);
}
}
导出默认应用程序；

上面从一个KudoList.js中提取，它本质上是我的组件，然后从Contact.js组件中提取，形成您在屏幕截图中看到的UI

KudoList.js：

import React from "react";
import Contact from "./Contact";

function KudoList(props) {
  return (
    <div>
        {props.contacts.map(c => <Contact key={c.id} name={c.name} fname={c.fname} lname={c.lname} kgive={c.kgive} kreceived={c.kreceived} /> )}
    </div>
  );
}

export default KudoList;

从“React”导入React；
从“/Contact”导入联系人；
功能库多利斯特（道具）{
返回(
{props.contacts.map（c=>）}
);
}
导出默认KudoList；

然后联系www.js：

import React from "react";
import "./Contact.css";

class Contact extends React.Component {
    state = { kgive: 0,
              fname: '',
              lname: '',
              kreceived: ''
    };

    constructor(props) {
      super(props);

      this.incrementKudoCount = this.incrementKudoCount.bind(this);
    }

    incrementKudoCount(ev) {
      this.setState((prevState) => ({
        kgive: prevState.kgive + 1,
      }));
    }

    render() {
      return (
        <div className="appPerson">
          <p>Name: {this.props.fname} {this.props.lname} <button onClick={this.incrementKudoCount}>Give Kudo!</button></p>
          <p>Kudos Given: {this.props.kgive}</p>
          <p>Kudos Received: {this.props.kreceived}</p>
        </div>
      );
    }
  }

export default Contact;

从“React”导入React；
导入“/Contact.css”；
类Contact扩展了React.Component{
state={kgive:0，
fname:“”，
lname:“”，
K收到：''
};
建造师（道具）{
超级（道具）；
this.incrementKudoCount=this.incrementKudoCount.bind（this）；
}
增量kudocount（ev）{
this.setState（（prevState）=>({
kgive:prevState.kgive+1，
}));
}
render（）{
返回(
名字：{this.props.fname}{this.props.lname}给工藤

给予的荣誉：{this.props.kgive}

获得的荣誉：{this.props.kreceived}

);
}
}
导出默认联系人；

---

你可以看到我在哪里注释掉了我认为最好添加到列表中的状态和函数，但是如果我映射这个列表并想在每个kudo计数旁边绑定一个按钮，那么我就混淆了最好的方法。我肯定我错过了一些简单的东西。非常感谢您的帮助。

这应该是您想要的。您希望使用类而不是函数，因为您希望维护状态。因此，我们需要首先初始化起始状态值，然后将函数的上下文绑定到类。您将需要绑定函数上下文，因为当您将其传递给onClick函数时，它将失去对类属性的访问，绑定会阻止这一点

class Contact extends React.Component {
  state = { kudos: 0 };

  constructor(props) {
    super(props);

    this.incrementKudoCount = this.incrementKudoCount.bind(this);
  }

  incrementKudoCount(ev) {
    this.setState((prevState) => ({
      kudos: prevState.kudos + 1,
    }));
  }

  render() {
    return (
      <div className="appPerson">
        <p>Name: {props.fname} {props.lname}</p>
        <p>Kudos Given: {this.state.kudos}</p>
        <p>Kudos Received: {props.kreceived}</p>
        <button onClick={this.incrementKudoCount}>Give Kudo!</button>
      </div>
    );
  }
}

---

类联系人扩展了React.Component{
国家={荣誉：0}；
建造师（道具）{
超级（道具）；
this.incrementKudoCount=this.incrementKudoCount.bind（this）；
}
增量kudocount（ev）{
this.setState（（prevState）=>({
荣誉：prevState.kudos+1，
}));
}
render（）{
返回(
名称：{props.fname}{props.lname}

给予的荣誉：{this.state.Kudos}

获得的荣誉：{props.kreceived}

给工藤！
);
}
}

---

有一点是，这不是一个持久的计数。如果您希望在许多用户和访问中保持计数，则需要添加此后端逻辑。你仍然可以在你的

incrementKudoCount

中进行网络调用，但是如果你计划建立更多的用户到网络交互，那么在研究redux之类的东西时可能是值得的。

你的应用程序的最佳方式是使用

上下文API

，它是从16.0 React版本开始发布的

这是一个很好的开始，这个特性可以帮助您使用状态管理，例如，您可以将所有这些存储在应用程序的顶部

你可以重复使用这个，你想去哪里

对于一般或更大的应用程序，您可以使用Redux

有关

上下文API

的更多信息，请参阅该文档：

---

有道理，但按钮和增量有问题。我现在拥有的是：

class Contact extends React.Component{state={kgive:0}；构造函数（props）{super（props）；this.incrementKudoCount=this.incrementKudoCount.bind（this）；}incrementKudoCount（ev）{this.setState（（prevState）=>（{kgive:prevState.kgive+1，}））；}render（）{return（Name:{this.props.fname}{this.props.lname}给予荣誉！
给予的荣誉：{this.props.kgive}
获得的荣誉：{this.props.kreceived}
）；}

请原谅我的格式设置，因为我无法正确设置格式并在响应中显示我的代码。我在这里使用的方式的问题是，按钮单击，但什么也没有发生。即使尝试为其他人添加道具，也不会改变计数。将更新原始问题中的源代码。@Mark好的，我理解，您需要更改e

给予的荣誉：{props.kgive}
给予的荣誉：{this.state.Kudos}
。我们正在更新状态，但从未在UI中实际显示它。