您应该data在vote从 fetch 响应中获取数据后设置您的状态。你有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>
  );
};

因此，由于您的处理程序函数正在获取person_id并且您的调用正在返回新的投票计数，您应该在状态中更新数据表中的当前人员对象。

下面是一个例子：

更新当前用户的投票数