React 使用 State Hook 错误 TypeError: setUser is not a function

Question

当我按下提交按钮时，我收到此错误，TypeError: setUser is not a function。我正在尝试从表单中获取数据并存储它。

应用程序JS

import React, { useState } from 'react';
import User from './Components/User';
import Card from './Components/Card';

function App() {

  const {user, setUser} = useState([{username: "", age: 1}]);

  const handleUserAdd = (user1) => {
    setUser(user1);

    console.log(user);
  }

  return (
    <div className="App">
      <Card>
         <User onUserAdd={handleUserAdd}/>
      </Card>
    </div>
  );
}

export default App;

用户JS

import React, { useState } from 'react';

const User = (props) => {

    const {name, setName} = useState("");
    const {years, setYears} = useState(1);

    const handleOnNameChange = (e) => {
        setName(e.target.value);
    }

    const handleOnAgeChange = (e) => {
        setYears(e.target.value);
    }

    const handleOnSubmit = (e) =>{
        e.preventDefault();

        const user = {
            username: name,
            age: years
        };

        props.onUserAdd(user);

        setName("");
        setYears();
    }

    return ( 
        <>
            <form onSubmit={handleOnSubmit}>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Username:</label>
                    <input class="form-control" aria-describedby="emailHelp" value={name} onChange={handleOnNameChange} />
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Age:</label>
                    <input type="number" min={1} max={120} class="form-control" value={years} onChange={handleOnAgeChange} />
                </div>
                <button type="submit" class="btn btn-primary">Add User</button>
            </form>
        </>
    );
}
 
export default User;

错误的屏幕截图

当我在输入框中输入时也会发生这种情况：

我以前使用过 useState 钩子，但从未发生过，如果你能帮我解决这个问题，我将不胜感激！

Answer 1

useState返回一个数组而不是一个对象。你应该像这样解构它；

const [user, setUser] = useState([{username: "", age: 1}]);