reactjs - 按钮上的重新渲染组件单击反应钩子
问题描述
我是反应世界的新手,一旦onClick={() => deleteHandler(user)
触发,我只想重新渲染 DOM,以便更新用户列表。现在它只在页面刷新时更新。正如这里的一些答案所建议的那样,我也尝试 setState 但没有运气。任何人都可以看看并确认我哪里出错了。
用户管理.js
import React, { useEffect, useState } from "react";
import { BrowserRouter } from "react-router-dom";
import { useDispatch, connect } from "react-redux";
import image from "../logo1.png";
import { userList, deleteUser } from "../Action/userAction";
function UserManagment(props) {
const dispatch = useDispatch();
const users = props?.userData?.userData?.data?.user;
const [state, setState] = useState([]);
useEffect(() => {
dispatch(userList());
return () => {
//
};
}, [dispatch]);
useEffect(() => {
if(props?.userData?.userData?.status === 200){
}
}, [props, props.state]);
const deleteHandler = (user) => {
console.log(state)
setState(dispatch(deleteUser(user._id)));
};
return (
<BrowserRouter>
<div>
<div>
<div className="container">
<div className="row">
<header className="clearfix">
<nav className="navbar navbar-default" style={{ boxShadow: "1px 1px 4px 3px #C2B8B8", padding: "10px" }}>
<div className="container">
<ul className="nav navbar-nav">
<li>
<a href className="navbar-brand" style={{ padding: "6px" }}>
<img className=" text-center" alt="Logo" src={image} style={{ height: "40px" }} />
</a>
</li>
<li style={{ fontWeight: "bold", paddingTop: "15px" }}>User Management</li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li>
<div className="inset" style={{ marginRight: "20px" }}>
{/* <h4>{userInfo ? <Link to="/profile">{userInfo.name}</Link> : <Link to="/signin">Sign In</Link>}</h4> */}
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-12 " style={{ boxShadow: "1px 1px 4px 3px #C2B8B8", background: "#fff", padding: "15px 10px" }}>
<table className="table table-hover table-bordered ">
<thead style={{ background: "#4caf50", color: "#fff" }}>
<tr>
<th className="text-center">First Name</th>
<th className="text-center">Role</th>
<th className="text-center">Email</th>
<th className="text-center">Phone Number</th>
<th className="text-center">Delete</th>
</tr>
</thead>
{
<tbody>
{users?.map?.((user) => (
<tr key={user._id}>
<td>{user.name}</td>
<td>{user.role}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
<td className="text-center text-danger">
<button onClick={() => deleteHandler(user)}>
<i className="glyphicon glyphicon-trash text-danger" />
</button>
</td>
</tr>
))}
</tbody>
}
</table>
</div>
</div>
</div>
</div>
</div>
</BrowserRouter>
);
}
function mapStateToProps(state) {
return {
userData: state.userList,
};
}
function mapDispatchToProps(dispatch) {}
export default connect(mapStateToProps, mapDispatchToProps)(UserManagment);
PS:已经检查了以下问题的答案。
你可以在不调用 setState 的情况下强制 React 组件重新渲染吗?
React:单击按钮时重新渲染组件
解决方案
这在这里不会做任何事情,因为dispatch
它是一个void
函数(除非您使用 thunk)。
setState(dispatch(deleteUser(user._id)));
connect
订阅 Redux 存储中的更改。每次值state.userList
更改时,它都会使用更新的道具重新渲染您的组件。这应该是调用的结果dispatch(deleteUser(user._id))
。如果它没有发生,那么问题和解决方案就在你的 reducer 中,而不是在这个组件中。
如果我不得不猜测,我怀疑您正在调用state.userList
诸如splice
.
推荐阅读
- azure - Azure Maps API - 按类型限制
- git - 在 git log 中结合 --grep 和 -G 选项
- javascript - 尝试刷新特定的画布元素
- rabbitmq - 如何知道队列中的所有消息何时被消耗掉?
- powershell - 在 PowerShell 中将路径设为变量
- json - 列出来自 json 字段的任意数量的元素(postgres)
- json - 如何在 Gin 路由器中渲染静态文件?
- django - 如何计算 Django 中的唯一 IP(每天 1 个唯一 IP)?
- sql - 在保留数组顺序的同时批量选择数组中的 id
- parallel-processing - 使用 mpi4py 如何让多个节点在 HPC 集群中运行 python 脚本?