Reactjs 变异状态被认为是错误的做法，但在提交表单时如何避免变异状态？

我正在使用两个输入字段来输入

name

和

number

，然后我的

onSubmit

事件处理程序是这样的

const contactFormSubmit=（事件）=>{
event.preventDefault（）
常量contactObject={
姓名:姓名,，
号码：号码
}
setNewContact（{…newContact，名称：contactObject.name，编号：contactObject.number}）
集合名（“”）
集合编号（“”）
}

在react中，改变状态被认为是一种不好的做法，我想知道这种设置我的

newContact

的方式是否会改变状态，如果会，我该如何避免

根据经验，我发送的数据一经提交就会改变状态吗？

---

我在这里所做的被认为是变异状态吗？

我相信你误解了变异状态的含义。您所做的正是正确的，因为您每次都在创建一个新对象

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;

如果您修改了状态的当前实例，则它将是变异状态。不使用“setNewContact”，您可以执行以下操作：

setNewContact({ *I am a new object who is gonna replace the old one* })

---

直接改变状态是不好的做法，使用钩子的

setState

或

setX

改变状态是改变状态的正确方法。在大多数应用程序中，状态都必须更改，但在React的数据流之外进行更改会产生问题，因为React无法跟踪更改。这段代码在我看来很好。使用redux进行状态管理我不熟悉redux，作为react的初学者，学习redux会很困难吗？我不同意@yannicuLar，像这样简单的表单不需要redux。使用

setState

应该可以像@Chris B一样。saidso使用useState提供的setter是正确的方法吗？是的，这是正确的

newContact.name = contactObjeject.name
newContact.number= contactObjeject.number