当我尝试显示组件 onClick 时，反应状态保持不变答案

【问题标题】：React State remains immutable when i try to show component onClick当我尝试显示组件 onClick 时，反应状态保持不变
【发布时间】：2021-01-28 18:31:00
【问题描述】：

我有这样的带有 onClick 功能的按钮：

<button className="btn" onClick={(e) => handleClick(user._id, e)} >Edit</button>

const [show, setShow] = useState(false)


const handleClick = (id, e) => {
    e.preventDefault()
    setShow(!show)
    dispatch(getUser(id))}

/* And here rendering based on State */
{
  show ? renderUserData() : null
}

所以，问题在于 handleClick 函数中的 setShow(!show) 不起作用，并且 show 的状态仍然是假的，不可变的。如果 handleClick 函数仅包含 setShow(!show)，则此函数工作并切换 renderUserData()，但当它同时包含 dispatch(getUser(id)) 和 setShow(!show) 时，显示状态始终为 false，请帮助

【问题讨论】：

如果在const [show, setShow] = useState(false)下方添加console.log("mounting")，点击按钮后会再次打印吗？
是的，它正在打印@NadiaChibrikova
这意味着您的dispatch 以某种方式触发了一个卸载组件并安装全新组件的过程。并不是说状态是不可变的，它只是不同组件的完全不同的状态。您需要查看组件的父级以找出它这样做的原因。（另外preventDefault 确实可以删除，但对您的问题没有任何影响）
对象 { 类型：“GET_USER_REQUEST”} 安装，对象 { 类型：“GET_USER_SUCCESS”，有效负载：{…} } 安装。控制台显示挂载 2 次，我同意你的观点，即调度以某种方式触发了一个卸载组件的进程。我非常感谢您的帮助需要尽快解决。 @NadiaChibrikova
哦，实际上日志必须在useEffect 内（对此感到抱歉）。如果你添加useEffect 就像在这个例子中jsfiddle.net/931wtLm0 并且你的组件确实被卸载了，你可以在那里添加一个断点并希望看到是什么触发它

标签： reactjs react-redux

【解决方案1】：

尝试删除e.preventDefault()，您可以使用自己的数据，但e.preventDefault() 在按钮中没有用（如果您有表单，请尝试将其放入表单的onSubmit）但最后解决方案必须如下所示：

import React, { useState } from "react";

export default function App() {
  const [show, setShow] = useState(false);

  const handleClick = (id, e) => {
    setShow(!show);
  };

  return (
    <>
      {show ? <h1>Data showed</h1> : null}
      <button className="btn" onClick={(e) => handleClick(e)}>
        Edit
      </button>
    </>
  );
}

【讨论】：

删除 e.preventDefault() 并不能解决问题，问题是在 handleClick 函数内 setShow 和 useDispatch 不能一起工作，如果我评论调度操作然后 setShow 工作，但不能一起工作。
@GIorgi 然后尝试将它们放入匿名函数中并立即调用它们：;(function () {setShow(!show)})() ;(function () {dispatch(getUser(id))})() 尝试复制并粘贴此代码并用它替换 dispatch 和 setShow
我尝试在调度时设置超时并看到，setShow(!show) 一直有效，直到进行调度(getUser(id)) 操作调用，调度使 setShow 始终为 false。请帮帮我，我第二天就卡住了。
您能否提供更多信息或发送指向您的存储库的链接？因为在我看来，代码中没有错误，它应该可以完美运行。如果有可以发送的存储库链接，我调试代码会容易得多
github.com/Giorgi-Kirvalidze/mern-admin 这是一个存储库，所以请记住我的问题出在 src/containers/Users/index.js 中，特别是在按下“编辑”按钮时会调用 handleClick 函数，我的目的是我想切换渲染组件并同时进行调度操作。如果您注释掉调度，那么 setShow(!show) 正在工作，但是当动作被调度时，它会将 show 默认值的状态设置为 false。