reactjs - 当我尝试显示组件 onClick 时，React State 保持不变

Question

我有这样的 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) 不起作用，并且显示状态仍然是假的，不可变的。如果handleClick 函数只包含setShow(!show) 那么这个函数可以工作并切换renderUserData()，但是当它同时包含dispatch(getUser(id)) 和setShow(!show) 时，显示状态一直保持为false，请帮忙

Answer 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>
    </>
  );
}