Javascript React.js钩子奇怪的行为

由于某些原因，默认值始终显示，而在输入上输入的最后一个值则不显示

APP.JS

import React，{useState}来自“React”；
从“./Components/User”导入用户；
从“./组件/卡”导入卡；
函数App（）{
const[user，setUser]=useState（[{用户名：“Alex”，年龄：11}]）；
const handleUserAdd=（user1）=>{
setUser（prevState=>([
…状态，用户1
]));
console.log（用户）；
}
返回(
);
}
导出默认应用程序；

USER.JS

import React，{useState}来自“React”；
常量用户=（道具）=>{
const[name，setName]=useState（“”）；
const[years，setYears]=useState（0）；
const handleOnNameChange=（e）=>{
设置名称（如目标值）；
}
常量handleOnAgeChange=（e）=>{
设定年数（如目标值）；
}
const handleOnSubmit=（e）=>{
e、 预防默认值（）；
//如果（年！==0）{
常量用户={
用户名：name，
年龄：岁
};
道具。onUserAdd（用户）；
//}
集合名（“”）；
三年（0）；
}
报税表（
用户名：
年龄：
添加用户
);
}
导出默认用户；

显示的内容：

它显示Alex 11，这是默认值，如果我将其设置为空，它将显示为空项。 在输入上，我输入了3个值：值1，1；值2,2；值3,3。值3,3未显示，如果输入值4,4，则值3将显示，而值4,4将不显示。我不明白为什么它用默认值填充第一个值，而不是将其更改为值1,1。为什么它没有显示最后一个呢

---

如果您能帮助我，我将不胜感激。

用户状态未提供给用户组件？还有

console.log（用户）

inside

handleUserAdd

将显示旧值。不要在u

setUser

之后立即显示console.log（user），因为设置状态是异步的。将

console.log（user）

置于

handleUserAdd

函数之外，您可以在下次渲染时看到正确的值。并使用

parseInt（）

将年龄字符串转换为数字这是否回答了您的问题？

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

function App() {

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

  const handleUserAdd = (user1) => {
      setUser(prevState => ([
        ...prevState, user1
      ]));

    console.log(user);
  }

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

export default App;

import React, { useState } from 'react';
const User = (props) => {
    const [name, setName] = useState("");
    const [years, setYears] = useState(0);
    const handleOnNameChange = (e) => {
        setName(e.target.value);
    }
    const handleOnAgeChange = (e) => {
        setYears(e.target.value);
    }
    const handleOnSubmit = (e) =>{
        e.preventDefault();
        //if(years !== 0){
            const user = {
                username: name,
                age: years
            };
            props.onUserAdd(user);
        //}
        setName("");
        setYears(0);
    }
    return ( 
        <>
            <form onSubmit={handleOnSubmit}>
                <div className="mb-3">
                    <label htmlFor="exampleInputEmail1" className="form-label">Username:</label>
                    <input className="form-control" aria-describedby="emailHelp" value={name} onChange={handleOnNameChange} />
                </div>
                <div className="mb-3">
                    <label htmlFor="exampleInputPassword1" className="form-label">Age:</label>
                    <input type="number" min={1} max={120} className="form-control" value={years} onChange={handleOnAgeChange} />
                </div>
                <button type="submit" className="btn btn-primary">Add User</button>
            </form>
        </>
    );
}
 
export default User;