javascript - 使用 React 在客户端组件中发布和更新计数

问题描述

似乎无法让此onClick按钮工作并更新“给予的荣誉”号码。基本上 3 个 .js 文件，同时使用这个 API进行测试。我的代码是：

应用程序.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;

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;

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

我没有收到任何错误，但按钮绑定事件无法正常工作，也不知道为什么。我应该有一个单独的组件来提供 kudo 还是不能像我一样简单地进行一些修改？

标签： javascriptreactjsfunction

javascript - 使用 React 在客户端组件中发布和更新计数

问题描述

解决方案

推荐阅读