使用反应钩子更新 setState

Question

我是 React Hooks 的新手。我一直在通过stackoverflow中的一些问题学习这种语言。尽管我在这里探索了其他问题 3 天以找出我的以下问题，但我还没有找到合适的方法。

以下链接是我的简化代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [render, setRender] = useState(true);
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      <button onClick={() => setRender(!render)}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(!show)}>Hide</button>
        </div>
      ) : /// setShow(true) <- How can I update it?

      null}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从我的示例中，我想尝试的是，当单击 Hide 按钮时，Hello CodeSandbox 会消失，因为在 show 变为 false 后它是 null。但是，问题是当我单击 Render 按钮时，它应该再次显示 Hello CodeSandbox 但它没有。我相信原因是因为 show 状态仍然保持false。因此，我想在单击 Render 按钮后将 show 状态更新为 true，以便出现 Hello CodeSandbox。

是否可以在使用null 之前更新状态？或者有没有更好的办法？

Answer 1

您正在基于状态show 进行渲染，因此您的Render 按钮应该操纵该状态，只需在单击时将其设置回true：

function App() {

 const [show, setShow] = useState(true);
  return (
    <div className="App">
      <button onClick={() => setShow(true)}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(false)}>Hide</button>
        </div>
      ) :
      null
     }
    </div>
  );
}

Answer 2

只需创建一个可以更新两种状态的函数并使用您的渲染按钮调用它：

function App() {
  const [render, setRender] = useState(true);
  const [show, setShow] = useState(true);

  const update = () => {
    setRender(!render);
    setShow(!show)
  }
  
  return (
    <div className="App">
      <button onClick={update}>Render</button>
      {show ? (
        <div>
          <h1>Hello CodeSandbox</h1>
          <button onClick={() => setShow(!show)}>Hide</button>
        </div>
      ) : /// setShow(true) <- How can I update it?

      null}
    </div>
  );
}