如何在从数据中删除某些内容后自动刷新页面?所以我不会有手动刷新页面看到的变化。我使用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解决了这个问题,并试图做类似的事情,但仍然没有帮助
3条答案
按热度按时间pbossiut1#
你正在使用redux,这样你就可以管理商店中用户的状态,而你已经只管理get了。我相信你的FetchUserList动作从API中获取用户,然后更新用户的状态。现在在删除的情况下,你只需要从商店中删除用户,boom redux会为你做休息,因为你正在使用连接。如果props会改变,那么你的组件将呈现更新用户。
要删除,您可以像这样使用filter函数:
我不知道你用的是哪个redux中间件,所以我用了一个通用的reducer。但如果你能用reducer代码更新你的问题,那么我将帮助你更相关的代码。
bpsygsoo2#
RemoveUser
操作分派deleteUser
操作,但不指定应该删除 * 哪个 * 用户。state.loading
值被更新,这将触发应用/组件重新呈现,但由于state.user.userList
没有更新,UI呈现的内容与用户被“删除”之前相同。更新
deleteUser
操作以使用应删除的用户ID。更新
DELETE_USER
reducer案例以更新userList
状态。使用Array.prototype.filter
过滤userList
数组,保留所有id不匹配的数组元素。更新
RemoveUser
操作,以便在分派deleteUser
操作时将将要删除的用户的id传递给该操作。删除setTimeout
/window.location.reload
黑客.在
userList
状态更新并且应用/组件重新呈现之后,它也应该具有更新的state.user.userList
状态值。q8l4jmvw3#
您可以使用
location.reload();
,它等待4秒的“吐司”,如果我帮你或你有问题,请在下面评论:};