如何在从数据中删除某些内容后自动刷新页面？所以我不会有手动刷新页面看到的变化。我使用axios和js-server进行数据操作，如果你需要这些信息。我有这个代码：

import { connect } from "react-redux";
import { FetchUserList, RemoveUser } from "../Redux/Action";
import { useEffect } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

const UserListing = (props) => {
  useEffect(() => {
    props.loadUser();
  }, []);

  const handleDelete = (code) => {
    if (window.confirm("Do you want to remove?")) {
      props.removeUser(code);
      props.loadUser();
      toast.success("User removed successfully.");
    }
  };

  return props.user.loading ? (
    <div>
      <h2>Loading...</h2>
    </div>
  ) : props.user.errMessage ? (
    <div>
      <h2>{props.user.errMessage}</h2>
    </div>
  ) : (
    <>
      <div className="card">
        <div className="card-header">
          <Link to={"/user/add"} className="btn btn-success">
            Add User [+]
          </Link>
        </div>
        <div className="card-body">
          <table className="table table-bordered table-dark">
            <thead className="">
              <tr>
                <td>Code</td>
                <td>Name</td>
                <td>Email</td>
                <td>Phone</td>
                <td>Role</td>
                <td>Action</td>
              </tr>
            </thead>
            <tbody>
              {props.user.userList &&
                props.user.userList.map((item) => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.email}</td>
                    <td>{item.phone}</td>
                    <td>{item.role}</td>
                    <td>
                      <Link
                        to={"/user/edit/" + item.id}
                        className="btn btn-primary"
                      >
                        Edit
                      </Link>
                      <button
                        onClick={() => {
                          handleDelete(item.id);
                        }}
                        className="btn btn-danger"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    loadUser: () => dispatch(FetchUserList()),
    removeUser: (code) => dispatch(RemoveUser(code)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(UserListing);

下面是reducer：

import {
  ADD_USER,
  DELETE_USER,
  FAIL_REQUEST,
  GET_USER_LIST,
  MAKE_REQUEST,
} from "./ActionTypes";

const initialState = {
  loading: true,
  userList: [],
  userObj: {},
  errMessage: "",
};

export const Reducer = (state = initialState, action) => {
  switch (action.type) {
    case MAKE_REQUEST:
      return {
        ...state,
        loading: true,
      };

    case FAIL_REQUEST:
      return {
        ...state,
        loading: false,
        errMessage: action.payload,
      };

    case GET_USER_LIST:
      return {
        loading: false,
        errMessage: "",
        userList: action.payload,
        userObj: {},
      };
    case DELETE_USER:
      return {
        ...state,
        loading: false,
      };
    case ADD_USER:
      return {
        ...state,
        loading: false,
      };
    default:
      return state;
  }
};

如果需要，还可以使用actions文件：

import axios from "axios";
import {
  ADD_USER,
  DELETE_USER,
  FAIL_REQUEST,
  GET_USER_LIST,
  MAKE_REQUEST,
} from "./ActionTypes";
import { toast } from "react-toastify";

export const makeRequest = () => {
  return {
    type: MAKE_REQUEST,
  };
};

export const failRequest = (err) => {
  return {
    type: FAIL_REQUEST,
    payload: err,
  };
};

export const getUserList = (data) => {
  return {
    type: GET_USER_LIST,
    payload: data,
  };
};

export const deleteUser = () => {
  return {
    type: DELETE_USER,
  };
};

export const addUser = () => {
  return {
    type: ADD_USER,
  };
};

export const FetchUserList = () => {
  return (dispatch) => {
    dispatch(makeRequest());
    axios
      .get("http://localhost:8000/user")
      .then((res) => {
        const userList = res.data;
        dispatch(getUserList(userList));
      })
      .catch((err) => {
        dispatch(failRequest(err.message));
      });
  };
};

export const RemoveUser = (code) => {
  return (dispatch) => {
    dispatch(makeRequest());
    axios
      .delete("http://localhost:8000/user/" + code)
      .then((res) => {
        dispatch(deleteUser());
        toast.success(
          "User removed successfully, please wait a couple of seconds."
        );
        setTimeout(() => {
          location.reload();
        }, 5000);
      })
      .catch((err) => {
        dispatch(failRequest(err.message));
      });
  };
};

export const FuncAddUser = (data) => {
  return (dispatch) => {
    dispatch(makeRequest());
    axios
      .post("http://localhost:8000/user", data)
      .then((res) => {
        dispatch(addUser());
        toast.success("User added successfully.");
      })
      .catch((err) => {
        dispatch(failRequest(err.message));
      });
  };
};

现在我用非常原始的方法解决了这个问题，使用settool在5秒后恢复页面，但我相信这不是prof编程应该如何工作的
我看到一些人用useEffect或useError解决了这个问题，并试图做类似的事情，但仍然没有帮助