Javascript 在客户端组件中使用React to post和update count

似乎无法使此

onClick

按钮起作用并更新“已授予荣誉”号码。基本上是3.js文件，而用于测试。我的代码是：

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应用程序
);
}
}
导出默认应用程序；

Contact.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.incrementKudoCount（）}>给Kudo

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

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

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

然后是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；

---

我没有收到任何错误，但是按钮绑定事件没有正常工作，并且不确定原因。我应该有一个单独的组件来提供kudo，还是不能像我的组件那样简单，只需稍加修改？

事件侦听器应该是一个函数。我看到您正在返回（调用）函数。 只要

onClick={this.incrementKudoCount}

就可以了

**更新：工作沙盒**（因为stackoverflow沙盒不支持导入）

---

try onClick={this.incrementKudoCount}@HemaNandagopal-无法解决此问题。不知道为什么……一切似乎都很好，你能把它添加到一些github repo或codepen中吗？@HemaNandagopal-它都在3个文件的顶部。仅此而已，也没什么更复杂的。在联系人组件中，当您单击时，您会在状态中更改kgive，但会在道具中显示kgive。为什么？您应该使用react-dev工具，并在state中检查kgive值，但该值不起作用。这样做时不会发生任何事情。原因是，您正在更新状态并呈现道具。您可能需要在contacts.js中的render中引用

this.state.kgive

，而不是

this.props.kgive

我不清楚您的意思是什么？你能详细说明一下吗？@Mark我已经在沙盒代码中这样做了。[将沙盒创建为stackoverflow编译器不支持多个文件。@Mark我做了两个更改。1.单击事件我刚刚传递了clickHandler函数。2.在render方法中，你引用了

this.props.kgive

我将其设置为

this.state.kgive