我想在每次单击提交按钮时将对象存储在一个数组中，但是在每个提交按钮之后它将单个对象存储在一个数组中

Question

我希望在每次提交按钮点击后将用户对象存储在一个数组中，但它只是将单个对象存储在一个数组中并返回它。

从“反应”导入反应；

从“react-router-dom”导入 {useHistory}

从“反应”中导入 {useEffect}；

const Register = () =>{ //注册函数

const classes = useStyle();
const history = useHistory();
const [name, setName] = React.useState('');
const [password, setPassword] = React.useState('');
const arr = []


const submit = () =>{ //submit button

    localStorage.setItem('name',name);
    localStorage.setItem('password', password);
    const obj = {};
    obj.id = Math.random();
    obj.name = localStorage.getItem('name');
    obj.password = localStorage.getItem('password');
    arr.push(obj)

    history.push('/')
}
console.log(arr);





return(
    <div>
        <div className = {classes.formWrapper}>
            <Paper elevation={3} className = {classes.paper} >
            <Typography variant="h5" style = {{ textAlign : 'center'}}>Register</Typography>
            <form noValidate autoComplete="off">
                <TextField id="fname" className={classes.textfield} value = {fname} name = "name" label="Fist name" onChange = {e=>setFname(e.target.value)}/>
                <TextField id="lname" className={classes.textfield} value = {lname} name = "name" label="Fist name" onChange = {e=>setLname(e.target.value)}/>
                <br />
                <TextField id="username" className={classes.textfield} style={{width : '95%'}} value = {name} name = "username"  label="Username" onChange = {e=>setName(e.target.value)} />
                <br />
                <TextField id="email" className={classes.textfield} style={{width : '95%'}} value = {email} name = "email"  label="Email" onChange = {e=>setEmail(e.target.value)} />
                <br />
                <TextField id="password" className={classes.textfield} style={{width : '95%'}} value = {password} name = "password"  label="Password" onChange = {e=>setPassword(e.target.value)} />
                <br />
                <br />
                <Button variant="contained" color="secondary" style = {{width : '100%'}} onClick = {submit} >Register </Button>
            </form>
            </Paper>
        </div>
    </div>

)

}

导出默认寄存器；

Answer 1

1. 将arr 移动到本地组件状态。

   const [arr, setArr] = React.useState([]);
   

2. 更新提交处理程序中的arr 状态并重置表单。使用功能状态更新并将之前的 arr 状态浅复制到新数组中并附加新对象。

   const submit = (event) => {
     event.preventDefault(); // <-- prevent form submit action
   
     localStorage.setItem('name', name);
     localStorage.setItem('password', password);
     const obj = {};
     obj.id = Math.random();
     obj.name = localStorage.getItem('name');
     obj.password = localStorage.getItem('password');
   
     setArr(arr => [...arr, obj]); // <-- update arr state
   
     setName('');
     setPassword('');
   }