Html 在React.js的函数中尝试钩子和状态

这个代码语法正确吗？我试图达到的效果是，一旦点击按钮，文本就会出现

import React, { useState } from 'react';
import './App.css';

function Example(){
  const [state, setState] = useState({shows: false});

  return(
    <div>{state.shows && <p>hi</p>}
      <button onClick={() => setState({shows: true})}>
        Click me
      </button>
    </div>
  )
}

export default Example;

---

是的，但您不需要使用对象

function Example(){
 const [state, setState] = useState(false);

 return(
  <div>{state && <p>hi</p>}
   <button onClick={() => setState(true)}>
     Click me
   </button>
  </div>
 )
}

---

是的，您所实施的很好

但是，钩子用于简化react状态的使用

因此，在您的情况下，以下面的格式书写将被认为是完美的

const [shows, updateShow] = useState(false);
<button onClick={() => updateShow(!shows)}>Click me</button>

---

Ref:

当然可以，但对于简单状态，通常最好为状态对象命名它所包含的内容，即显示和设置显示，并直接给出初始值，即useStatefalse。那么您的渲染将是{shows&&…对于更复杂的状态和突变，建议使用useReducer。确定代码在语法上是否正确非常容易，看它是否通过了语法分析器。也许你的意思不同。@DrewReese这是一个使其更简单的好方法……但Jiml表明我不必更改内容。@user12099646，true，be尽管如此，但当您开始创建或使用带有多个状态挂钩的功能组件时，您会喜欢有意义的变量名。