使用 useState 时如何为 object 设置默认 state

Question

If I set a default value for an object using useState in a React function component, then my control linking to a field in that object does not get updated state values for a field in the object.

See this example:

import React, {useState} from 'react'
import {Form} from 'react-bootstrap'

function BrokenForm(props) {

    const defaultO = {
        field1: "this gets stuck in state - or so it looks ..."
    }

    const [o, setO] = useState(defaultO)          // Setting a default here causes trouble
    const [x, setX] = useState('simple value')    // This works as expected

    const onChangeField1 = (event) => {
        let newO = o
        newO.field1 = event.target.value
        setO(newO)
    }

    const onChangeX = (event) => setX(event.target.value)

    return (
        <Form>
            <Form.Label>Object Field1</Form.Label>
            <Form.Control value={o.field1} onChange={onChangeField1} />

            <Form.Label>Simple Value</Form.Label>
            <Form.Control value={x} onChange={onChangeX} />
        </Form>
    )
}

The first form control never updates with the value of o.field1 even though the onChangeField1 function looks like it has updated it.

However, if I initialize the value of o with a null object, everything works fine:

const [o, setO] = useState[{}]

What am I doing wrong?

Answer 1

Hi there in onChangeField1 you are not immutably cloning the state and that could be one of the reasons for the issue.When you assign an object to another in js it gives it a reference so

let newO=o;

It is just passing a reference

What you should do instead is

let newO={...o}

This will immutably clone the state.

Let me know if you face any issues even after this,