React useState() - 如何更新對象

Question

我似乎無法使用 useState() 更新我的 state，每當我的警報顯示時，我總是看到我的 state 顯示其初始值。

下面的示例代碼，我的期望是當我單擊“保存”按鈕時， setData將使用表單中的新值更新data ，然后顯示帶有警報的data內容。 但是，發生的情況是，每當我單擊保存時， alert總是顯示我的初始值。

如何使用我的字段值更新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

Answer 1

您可以使用“useEffect”鈎子，它的作用基本上是查看我們作為源傳遞給useEffect的數據是否有任何變化，如果有變化，它將觸發傳遞給它的function，在那里你可以提醒數據，就像您在 function “handleSave”中的代碼一樣，我們正在為數據分配新值，這最終將觸發 useEffect。

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

Answer 2

假設values也沒有更新，請嘗試切換到 Formik 的Field object 而不是 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>

如果 TextField 是第三方控件，那么您可能需要像這樣更新代碼：

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

您有時需要將 map 的所有 formik 功能返回到第三方庫的綁定庫。 就像您可以使用 formik-material-ui 為 Material-UI 提供綁定一樣。