Question

我正在使用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;

包装器

import { connect } from "react-redux";
import ScoreTable from "./ScoreTable";
import { handleDelete } from "../../data/actions/api";

const mapStateToProps = ({ scores, gameID }) => ({
  scores,
  gameID,
});

const mapDispatchToProps = (dispatch) => {
  return {
    handleClick: (gameID, scores) => {
      dispatch(handleDelete(gameID, scores));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(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) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

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

0 个答案: