reactjs - 当redux store中的值发生变化时，如何更新formik中的特定表单字段？

Question

我在我的反应应用程序中使用 formik。我已经从一个状态初始化了所有表单值。但是如果 redux 商店中的道具发生变化，我想更新一个特定的表单字段。下面是我的formik表格：

<Formik
initialValues={this.state.branchData}
enableReinitialize={true}
onSubmit={this.formSubmit} >
{({ values, setFieldValue }) => (
    <Form >
        <Row>
            <Col lg="12">

                <FormGroup className="col-6">
                    <Input type="select" value={values.StateId} name="StateId" onChange={this.handleChange(setFieldValue)}>
                        <option value='' >Select State</option>
                        {this.props.stateList && this.props.stateList.map((item, i) => (
                            <option key={i} value={item.StateId}>
                                {item.StateName}
                            </option>
                        ))}
                    </Input>
                    {this.validator.message('state', values.StateId, 'required')}
                    <Label className="impo_label">Select State</Label>
                </FormGroup>

                <FormGroup className="col-6">
                    <Field className="form-control" name="GstNo" type="text" maxLength="15" />
                    <Label className="impo_label">GST No</Label>
                    {this.validator.message('gst no', values.GstNo, 'required|min:15|max:15')}
                </FormGroup>


            </Col>
        </Row>
    </Form>
)}

现在，当我从下拉列表中更改状态时，将调用一个 api，它将按状态 id 返回 gst no。我想用从道具中的 api 收到的值更新 gst no 字段。如果收到的 gst no 为空，那么我希望用户输入 gst no，但如果从 api 收到 gst no，我想用 props 中收到的值更新表单中的 gst no 字段并禁用表单输入。我无法更新 this.state.branchData 中的 gstno，因为这将使用 this.state.branchData 中的值重置表单值。

有谁知道如何在formik中实现这一点？

标签： reactjsformik

Answer 1

您可以启用 Formik 的 enableReinitialize 属性来更新字段。

<Formik
   enableReinitialize={true}
   initialValues={...}
>
....