如何解决改变状态被认为是不好的做法,但是当我提交表单时如何避免改变状态?
import React,{ useState } from 'react';
const ContactForm = () => {
const [newContact,setNewContact] = useState({})
const [name,setName] = useState('')
const [number,setNumber] = useState('')
const nameInput = e => {
let newName = e.target.value
setName(newName)
}
const numberInput = e => {
let newNumber = e.target.value
setNumber(newNumber)
}
const contactFormSubmit = (event) => {
event.preventDefault()
const contactObject = {
name: name,number: number
}
setNewContact({ ...newContact,name: contactObject.name,number: contactObject.number })
setName('')
setNumber('')
}
return (
<div>
<form htmlFor="contacForm" onSubmit={contactFormSubmit}>
<h2>add contact</h2>
<div>
<label>name</label>
<input htmlFor="name" id="name" name="contact_name" value={name} onChange={nameInput} />
</div>
<div>
<label>number</label>
<input htmlFor="number" id="number" name="contact_number" value={number} onChange={numberInput} />
</div>
<button type="submit">add</button>
</form>
</div>
);
}
export default ContactForm;
在这种情况下,我想创建一个 contact
,它是一个对象,最初我的状态是一个空对象
const [newContact,setNewContact] = useState({})
我为 name
和 number
使用了两个输入字段,然后我的 onSubmit
事件处理程序是这样的
const contactFormSubmit = (event) => {
event.preventDefault()
const contactObject = {
name: name,number: contactObject.number })
setName('')
setNumber('')
}
在反应中改变状态被认为是一种不好的做法,我想知道这种设置我的 newContact
的方式是否会改变状态,如果是这样,我该如何避免它?
根据经验,onSubmit 我发送的数据会改变状态吗? 我在这里所做的是否被视为变异状态?
解决方法
我相信您误解了变异状态的含义。您正在做的事情恰到好处,因为您每次都在创建一个新对象。
setNewContact({ *I am a new object who is gonna replace the old one* })
如果您修改了状态的当前实例,则会改变状态。而不是使用“setNewContact”,你会喜欢:
newContact.name = contactObjeject.name
newContact.number= contactObjeject.number
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。