按钮上的重新渲染组件单击反应钩子答案

【问题标题】：rerender component on button click react Hooks按钮上的重新渲染组件单击反应钩子
【发布时间】：2021-08-11 19:51:22
【问题描述】：

我是 react 世界的新手，我只想在触发 onClick={() => deleteHandler(user) 后重新渲染 DOM，以便更新用户列表。现在它只在页面刷新时更新。正如这里的一些答案所建议的那样，我也尝试 setState 但没有运气。任何人都可以看看并确认我哪里出错了。

UserManagment.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 : 单击按钮时重新渲染组件

【问题讨论】：

Can you force a React component to rerender without calling setState? 是，Do you want to? 否。Why? 这不是一个好的做法，它偏离了 React 的思维方式。如果你认为有必要。看facebook.github.io/react/docs/component-api.html#forceupdate
用户列表有变化时需要更新reducer

标签： reactjs react-redux react-hooks

【解决方案1】：

这里不会做任何事情，因为dispatch 是一个void 函数（除非你使用thunk）。

setState(dispatch(deleteUser(user._id)));

connect 订阅 Redux 存储中的更改。每次state.userList 的值发生变化时，它都会使用更新的道具重新渲染您的组件。这应该在调用dispatch(deleteUser(user._id)) 时发生。如果它没有发生，那么问题和解决方案就在你的 reducer 中，而不是在这个组件中。

如果非要我猜的话，我怀疑你在 state.userList 上调用了一个变异函数，例如 splice。

【讨论】：