Reactjs Axios删除请求成功后未删除数据

我正在使用Axios和React Redux与API交互。当我发出删除请求时，它返回204，但是在页面上，数据没有从表中删除，并且ID（我用作表标识符）增加1。我怀疑这是钥匙的问题，有人能给我指出正确的方向吗

组成部分

import React from "react";

const ScoreTable = ({ scores, handleClick, gameID }) => {
  let listScore = scores.map((game, index) =>
    game.complete === true ? (
      <tr key={game.id}>
        <th scope="row">{game.id}</th>
        <td>{`${game.player_1.name} vs ${game.player_2.name}`}</td>
        <td>
          {game.player_1.won === true ? game.player_1.name : game.player_2.name}
        </td>
        <td>
          {game.player_1.score > game.player_2.score
            ? `${game.player_1.score} to ${game.player_2.score}`
            : `${game.player_2.score} to ${game.player_1.score}`}
        </td>
        <button
          type="button"
          class="close"
          aria-label="Close"
          onClick={() => handleClick(gameID, scores)}
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </tr>
    ) : null
  );

  return scores.length > 0 ? (
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Game</th>
          <th scope="col">Players</th>
          <th scope="col">Winner</th>
          <th scope="col">Score</th>
        </tr>
      </thead>
      {listScore}
    </table>
  ) : null;
};

export default ScoreTable;

API方法

export const handleDelete = (gameID, scores) => {
  return (dispatch) => {
    axios.delete(`/games/${gameID}`).then(
      ({ data }) => {
        dispatch(deleted(gameID, scores));
      },
      (error) => {
        console.log(error);
      }
    );
  };
};

行动

export const deleted = (gameID, scores) => {
  return {
    type: "DELETED",
    gameID: gameID,
    scores: scores,
  };
};

还原法

const deleted = (state, action) => ({
  ...state,
  scores: action.scores.filter((game) => game.id !== action.gameID),
});

反对

change_serve: 5
complete: false
id: 438
player_1: {name: "Player1", score: 0, serving: true, won: false}
player_2: {name: "Player2", score: 0, serving: false, won: false}
winning_score: 21

日志

删除前的操作和状态

{type: "DELETED", gameID: 435, scores: Array(137)}gameID: 435scores: (137) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

删除后的状态

(137) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

---

这里的gameID是什么onClick={（）=>handleClick（gameID，分数）}？也许你需要使用onClick={（）=>handleClick（game.id，scores）}？这很有效！非常感谢。

(137) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]