Javascript React useState（）-如何更新对象

我似乎无法使用useState（）更新我的状态，每当我的警报显示时，我总是看到我的状态显示其初始值

下面的示例代码，我的期望是，当我单击“保存”按钮时，

setData

将使用表单中的新值更新

data

，然后显示带有警报的

data

的内容。但是，每当我单击“保存”时，

alert

总是显示我的初始值

如何使用我的字段值更新

数据

，以便我的

警报

能够获取更改

const initialValues = {
    title: "",
    description: ""
}

const CreateForm = (props) => {
    const [data, setData] = useState(initialValues);

    const handleSave = (values) => {
        setData({
            title: values.title,
            description: values.description
        });

        setTimeout(() => {
            alert(JSON.stringify(data, null, 2));
        }, 3000)
    }
    return (
        <div>
             <Formik initialValues={data}
                validationSchema={validationSchema}
                onSubmit={(values) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                    }, 3000)
                }}
            >
                {props => (
                    <Form>
                        <TextField name="title" type="input" label="Title" />
                        <TextField name="description" type="input" label="description" />

                        <div >
                            <Button type="submit" variant="contained" color="primary">Submit</Button>&nbsp;
                            <Button variant="contained" color="secondary" onClick={() => handleSave(props.values)}>Save</Button>&nbsp;
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )

}

export default CreateForm

常量初始值={
标题：“，
说明：“”
}
const CreateForm=（道具）=>{
const[data，setData]=使用状态（初始值）；
常量handleSave=（值）=>{
设置数据({
标题：values.title，
description:values.description
});
设置超时（（）=>{
警报（JSON.stringify（数据，null，2））；
}, 3000)
}
返回(
{
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
}, 3000)
}}
>
{props=>(
提交
handleSave（props.values）}>保存
)}
)
}
导出默认CreateForm

您可以使用“useEffect”钩子，它基本上会查看数据中是否有任何更改，我们已将其作为源代码传递给useEffect，如果有更改，它将触发传递给它的函数，您可以在其中警告数据，正如在函数“handleSave”中的代码中，我们正在为数据分配新值，这将最终触发使用效果

  useEffect(() => {
         //logic for the alert
         alert(JSON.stringify(data, null, 2));
  },[data]);

---

假设

值

也没有更新，尝试切换到Formik的

字段

对象，而不是TextField

<Form>
  <Field name="title" type="input" label="Title" />
  <Field name="description" type="input" label="description" />

  <div >
    <Button type="submit" variant="contained" color="primary">Submit</Button>&nbsp;
    <Button variant="contained" color="secondary" onClick={() => handleSave(props.values)}>Save</Button>&nbsp;
  </div>
</Form>

提交
handleSave（props.values）}>保存

如果TextField是第三方控件，则您可能需要更新如下代码：

<Field name="title" type="input" label="Title" component={TextField}/>

有时需要一个绑定库来将所有的formik功能映射回第三方库。就像您可以使用formik material ui为material ui提供绑定一样。

当您调用

setData（..）

时，

CreateForm

将再次被调用，只有

data

将具有新值。