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

【问题标题】：Mutating state is considered bad practcice, but how do I avoid mutating state when i submit my form?变异状态被认为是不好的做法，但是当我提交表单时如何避免变异状态？
【发布时间】：2024-01-20 09:12:01
【问题描述】：

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: number
        }
        setNewContact({ ...newContact, name: contactObject.name, number: contactObject.number })
        setName('')
        setNumber('')
    }

在反应中改变状态被认为是一种不好的做法，我想知道这种设置我的newContact 的方式是否会改变状态，如果是，我该如何避免？

经验法则是，onSubmit 我发送的数据会改变状态？我在这里所做的是否被认为是变异状态？

【问题讨论】：

直接改变状态是不好的做法，使用setState或setX钩子改变状态是改变状态的正确方法。在大多数应用程序中必须更改状态，但是在 React 的数据流之外进行更改会产生问题，因为 React 无法跟踪更改。这段代码对我来说很好。
使用 redux 进行状态管理
我不熟悉redux，作为react初学者会不会很难学redux？
我不同意@yannicuLar，像这样的简单表单不需要redux。使用setState 应该没问题，就像@Chris B. 说的那样

标签： reactjs state javascript-objects

【解决方案1】：

我相信您误解了变异状态的含义。您所做的恰到好处，因为您每次都在创建一个新对象。

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

如果您修改了状态的当前实例，它将是变异状态。而不是使用“setNewContact”，你可以这样：

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

【讨论】：

那么使用useState提供的setter是对的吗？