Reactjs: как обновить подсчет голосов в реагировании

Question

Код ниже был разработан для обновления системы голосования.Он отлично работает, отображая результаты при загрузке страницы.

Вот моя проблема: мне нужно обновлять голос каждого пользователя в любое время, когда нажимается кнопка Получить счетчик голосов .

В серверной части у меня есть php-код, который возвращает данные массива, как показано ниже.

Может ли кто-нибудь помочь мне с отображением значений массива и обновлением, например, (голосование по 11) в зависимости от того, как проголосовал пользователь?

<?php
// Update user response on a post

    $return_arr[]= array("vote"=>"11");

    echo json_encode($return_arr);
    exit;

?>

Вот массив, возвращаемый Axios API Call

[{"vote":"11"}]

Вот код

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

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

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

  handleVote(person_id, person_vote) {
    const data_vote = {
      person_id: person_id,
      person_vote: person_vote
    };
    axios
      .get("http://localhost/vote.php", { data_vote })
      .then(response => {
        this.setState({ result_vote: response.data });
        console.log(this.state.result_vote);
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <span>
        <label>
          <ul>
            {this.state.data.map((person, i) => (
              <li key={i}>
                {person.name} --(vote count: {person.vote})
                <br />
                <input
                  type="button"
                  value="Get Vote Counts"
                  onClick={() => this.handleVote(person.id, person.vote)}
                />
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

Итак, поскольку ваша функция-обработчик получает person_id, а ваш вызов возвращает новый счетчик голосов, вы должны обновить текущий объект person в вашей таблице данных в состоянии.

Вот пример:

Обновление подсчета голосов для текущего пользователя

Answer 2

Вы должны установить ваше состояние data после получения данных vote из ответа на выборку.У вас есть person_id в вашем обработчике и вы получаете массив, включающий значение vote.Итак, map через ваше состояние data найдите соответствующий person и обновите его значение vote.

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

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

  handleVote(person_id, person_vote) {
    const data_vote = {
      person_id: person_id,
      person_vote: person_vote
    };
    axios
      .get("http://localhost/vote.php", { 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
        }));
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <li key={person.id}>
                {person.name} --(vote count: {person.vote})
                <br />
                <input
                  type="button"
                  value="Get Vote Counts"
                  onClick={() => this.handleVote(person.id, person.vote)}
                />
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

Старайтесь избегать использования индекса в качестве ключа.У вас есть person.id, поэтому используйте его в своем методе map.Кроме того, в качестве усовершенствования вы можете реорганизовать свой код и создать компонент Person.Вы можете передать соответствующие данные и обработчик голосования, а затем настроить там логику обновления.

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

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

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

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

const Person = (props) => {
  const { person, handleVote } = props;
  const onVote = () => handleVote(person);
  return (
    <li>
      {person.name} --(vote count: {person.vote})
      <br />
      <input type="button" value="Get Vote Counts" onClick={onVote} />
    </li>
  );
};