反应状态在函数内部未定义

Question

我有一个简单的注册表单。提交表单时，在 handleSubmit 函数中，我无权访问任何状态。我在这里做错了什么？

    const Signup = () =>{
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [username, setUsername] = useState('');

     const handleSubmit = (e) => {
      e.preventDefault()
      console.log(email)  #undefined

     }
    }

编辑：

import React from "react";
import {useState, useEffect} from 'react';

const Signup = () =>{
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [username, setUsername] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault()
    debugger
    # email passord username are not available here
    console.log({email}) 

  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"
                     className="form-control"
                     placeholder="Enter Username"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}/>
      <input type="email"
                     className="form-control"
                     placeholder="Enter email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)} />
    </form>
  )
}

export default Signup;

如果它 console.log({email}) 它会 return 值。我怎样才能得到所有的状态值。我必须做这样的事情吗const handleSubmit = (e, {email username password})

Answer 1

在 React 中，要显示变量（例如状态变量），您应该将变量放在 {}.

例如试试这个：

const Signup = () =>{
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const [username, setUsername] = useState('');

 const handleSubmit = (e) => {
  e.preventDefault()
  console.log({email} + "-" + {username} + "-" + {password}) 
 }
}

另一个例子：

const [value, setValue] = useState('');
.
.
<input type="text" value={value} />

Answer 2

让所有状态都在同一个对象而不是多个状态总是一个更好的主意。这是更简洁的方法，它也解决了这个问题，因为所有东西都将被同一个状态对象跟踪，所以重构也更容易。

import React from "react";
import { useState, useEffect } from "react";

const App = () => {
  const [formData, setFormData] = useState({
    email: "",
    username: ""
  });

  const handleChange = (key, value) => {
    setFormData({
      ...formData,
      [key]: value
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="form-control"
        placeholder="Enter Username"
        value={formData.username}
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="email"
        className="form-control"
        placeholder="Enter email"
        value={formData.email}
        onChange={(e) => handleChange("email", e.target.value)}
      />
      <button type="submit">submit</button>
    </form>
  );
};

export default App;

Link 到 Codesandbox：https://codesandbox.io/s/serene-bogdan-s8stm9?file=/src/App.js:0-924

反应状态在函数内部未定义

react state is undefined inside the function

reactjs

react-hooks