如何使用 reactjs 在按钮单击时正确显示加载事件

Question

我想通过 axios 调用服务器后端来更新他们的投票数。

一切正常。

这是来自 axios 调用的 json 响应示例。

[{ "id": "1", "name": "contestant 1", "vote": "300" }]

我的问题：

我唯一的问题是加载事件。当我点击第一个参赛者通过 axios 调用更新其投票结果时。反而 应用程序显示Content Loading... 仅针对点击参赛者按钮，它会显示Content Loading... 为所有三个参赛者按钮。

我想要什么：

请问我如何只为点击的参赛者按钮显示 Content Loading...

我猜这与被点击的参赛者的 ID 有关。这个我也试过了，没办法

if (person.id === person_id){
this.setState({ loading: true });
}

这是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
 isLoading: true
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", name: "contestant 1", vote: "3" },
        { id: "2", name: "contestant 2", vote: "6" },
        { id: "3", name: "contestant 3", vote: "2" }
      ]
    });
  }


  handleVote(person_id, person_vote) {
    const data_vote = {
      person_id: person_id,
      person_vote: person_vote
    };




this.setState({ loading: true }, () => {

 axios.get("http://localhost/apidb_react/result.json", { data_vote })
      .then(response => {
        const newData = this.state.data.map(person => {
       if (person.id !== person_id) return person;
       return { ...person,vote: response.data[0].vote };
        });
        this.setState(state => ({
          data: newData,
loading: false,
        }));
      })
      .catch(error => {
        console.log(error);
      });

});// close loading
  }

  render() {


let data_loading;
    if (this.state.loading) {
      data_loading = "Content Loading......"
    }


    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <li key={person.id}>
                {person.name} --(vote count: {person.vote})
                <br />
{data_loading}
                <button
                  type="button"

                  onClick={() => this.handleVote(person.id, person.vote)}
                >  Get Vote</button>
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

每个参赛者都需要一个单独的loading 状态。因此，合乎逻辑的下一步是创建具有自己的状态和自己的 UI 的 Contestant 组件，以将该状态反映给用户。

类似这样的：

class Contestant extends React.Component {
  static defaultProps = {
    onVote: () => {},
    onError: () => {}
  };

  constructor() {
    super();
    this.state = {
      isLoading: false
    };
  }

  handleVote(person_id, person_vote) {
    const data_vote = {
      person_id: person_id,
      person_vote: person_vote
    };

    this.setState({ isLoading: true });
    axios
      .get("http://localhost/apidb_react/result.json", { data_vote })
      .then(response => {
        this.props.onVote(person_id, response.data[0].vote);
        this.setState({ isLoading: false });
      })
      .catch(error => {
        this.props.onError(error);
      });
  }

  render() {
    const { person } = this.props;
    const { isLoading } = this.state;

    return (
      <li key={person.id}>
        {isLoading
          ? "Content Loading......"
          : `${person.name} --(vote count: ${person.vote})`}
        <br />
        <button
          type="button"
          onClick={() => this.handleVote(person.id, person.vote)}
        >
          Get Vote
        </button>
      </li>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", name: "contestant 1", vote: "3" },
        { id: "2", name: "contestant 2", vote: "6" },
        { id: "3", name: "contestant 3", vote: "2" }
      ]
    });
  }

  onVote = (person_id, vote) => {
    const { data } = this.state;

    this.setState({
      data: data.map(person => {
        if (person.id !== person_id) return person;
        return { ...person, vote };
      })
    });
  };

  render() {
    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <Contestant
                key={person.id}
                person={person}
                onVote={this.onVote}
              />
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

有点功能的沙盒：https://codesandbox.io/s/p7q3qylwj0。显然你需要在那里打一个真正的端点，而不是：http://localhost/apidb_react/result.json