改变状态被认为是不好的做法，但是当我提交表单时如何避免改变状态？

问题描述

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