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

Posted 2023-02-19

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

【英文标题】：i want to store object in an array each time the submit button clicks but it stores single object in an array after every submit button

【发布时间】：2021-09-11 08:42:22

【问题描述】：

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

从“反应”导入反应；

从“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>

)

导出默认寄存器；

【问题讨论】：

(1) arr 将在每个渲染周期重置，因此将任何内容保存到其中是没有实际意义的，(2) 在history.push('/') 之后，此组件可能已卸载，因此任何组件状态都可能是垃圾收集，（3）提交表单时，它可能会重新加载应用程序/页面，因为您没有阻止默认表单操作的发生。您的代码的实际期望行为是什么？

我想在每次单击提交按钮后将其存储为一个数组。我正在练习反应。

【参考方案1】：

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

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

更新提交处理程序中的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('');

【讨论】：

谢谢你，还有一件事。在哪里 console.log 检查它是否存储在数组中？

@MohammadFaateh React.useEffect(() => console.log(arr), [arr]);.