Question

如果我在React函数组件中使用useState为对象设置了默认值，则链接到该对象中的字段的控件不会获得该对象中字段的更新状态值。

请参见以下示例：

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>
    )
}

即使o.field1函数看起来好像已经对其进行了更新，第一个窗体控件也不会使用onChangeField1的值进行更新。

但是，如果我使用空对象初始化o的值，则一切正常：

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

我在做什么错了？

Answer 1

在onChangeField1中，您并不是一成不变地克隆状态，这可能是问题的原因之一。当您在js中将一个对象分配给另一个对象时，它会为其提供引用，

let newO=o;

它只是传递参考

您应该做的是

let newO={...o}

这将一成不变地克隆状态。

让我知道您是否在此之后仍然遇到任何问题，

使用useState时如何设置对象的默认状态

1 个答案: