Question

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

Am抽取用户from this 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;

上面的内容是从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;

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

您可以看到我注释掉了我认为最适合添加到列表中的状态和功能的位置，但是如果我映射此列表并希望在每个工时计数旁边绑定一个按钮，那么我会感到困惑做到这一点的方法。确保我缺少一些简单的东西。任何帮助都非常感谢。

Answer 1

这应该是您想要的。您想使用类而不是函数，因为您要维护状态。因此，我们需要首先初始化起始状态值，然后将函数的上下文绑定到类。您将需要绑定函数上下文，因为当您将其传递给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>
    );
  }
}

一件事是，这不是永久计数。如果您希望计数能够持续存在于许多用户和访问中，则需要添加此后端逻辑。您仍然可以在incrementKudoCount中进行网络通话，但是如果您打算建立更多的用户与网络的互动，那么在研究redux之类的内容时可能是值得的。

Answer 2

APP的最佳方法是使用Context API，它是从16.0 React版本开始发布的。

这是一个很好的起点，此功能可帮助您使用状态管理，例如，您可以将所有这些存储在应用程序的顶部。

您可以在需要的地方重复使用此功能。

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

请参阅该文档以获取有关Context API的更多信息：

About Context API

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

2 个答案: