react中基于state的div条件渲染

Question

下面是一个身份验证组件，它处理用户注册和登录到应用程序。 使用的方法是根据用户之前是否在应用程序中注册或他们是新用户来有条件地呈现 div。 div 不会根据初始 state 和设置的条件而更改。 在这种情况下， isSignUp state 是假的，因此用户之前没有注册，因此所有字段都应该可用于用户输入的数据，但这些字段已被省略。 下面是代码

const {isSignUp, setisSignUp} = useState(false);

<form onSubmit = {handleSubmit} className = 'form'>
  {isSignUp && (
    <div className='auth-form-field'>
      <input
      name="Full Name"
      type="text"
      placeholder="Full Name"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>
  )}  
  <div className='auth-form-field'>
      <input
      name="Email"
      type="text"
      placeholder="Email"
      className =  "form-input"
      onChange={handleChange}
      required
      />
  </div>
  { isSignUp && (
    <div className='auth-form-field'>
      <input
      name="User Name"
      type="text"
      placeholder="User Name"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>)
  }
  <div className = 'auth-form-field'>
    <input
    name="Password"
    type="password"
    placeholder="Password"
    className =  "form-input"
    onChange={handleChange}
    required
    />
  </div> 
  {isSignUp && (
    <div className = 'auth-form-field'>
      <input
      name="Confirm Password"
      type="password"
      placeholder="Confirm Password"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>)
  }      
</form>

Answer 1

您的useState语法在这里不正确

正确的语法：

const [isSignUp, setisSignUp] = useState(false);

Answer 2

使用 useState 的正确语法是带方括号，像这样

const [isSignup, setIsSignUp] = useState(false);