窗体上的挂钩管理状态不会在父组件中更新

Question

我有一个表格：

                        <FieldLabel label='Label'>
                            <Textfield
                                value={formState.name}
                                onChange={name => setFormState({ ...formState, name })}
                                name="someName"/>
                        </FieldLabel>
                        <FieldLabel label='Description'>
                            <Textarea
                                value={formState.description}
                                onChange={description => setFormState({ ...formState, description}}
                                name="someDesc"/>
                        </FieldLabel>

此表单是 'dumb'，这意味着它从父级获取其 formState 并在输入更改时分派 setFormState。在父组件中它看起来像：

            <MyForm
                formState={formState}
                setFormState={setFormState} />

其中 formState 和 setFormState 是钩子：

const initialFormState: FormState = {
    name: '',
    description: '',
}

const [formState, setFormState] = useState<FormState>({ ...initialFormState });

但是，状态没有改变，我也无法在表单的输入中写入任何内容。当我单击提交时，会记录初始状态，并且所有属性都是空字符串，就像在 initialFormState 中一样。

如果有人需要更多信息，我很乐意提供。谢谢

添加代码框link：https://codesandbox.io/s/admiring-haze-gsy59?file=/src/App.js

Answer 1

输入时的 onChange 不发出值，它发出一个事件。

替换为onChange={e => setFormState({ ...formState, name: e.target.value })}

窗体上的挂钩管理状态不会在父组件中更新

Hook managed state on Form does not update in parent component

frontend

reactjs

react-props

react-state-management

react-hooks