反应使用 State 钩子错误 TypeError: setUser is not a function

Question

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

APP.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返回一个数组，而不是 object。 你应该像这样解构它；

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