Question

我正在尝试将保存的值加载到formik表单中以允许对其进行更新，这是我的方法

<Formik
          initialValues={{
            name: ''
          }}
          render={({ errors, status, touched, setFieldValue, isSubmitting, values }) => (
            <>
              <div className="col-md-6">
                <form className="form-horizontal">
                  <div className="card-body">
                    <div className="form-group row">
                      <label htmlFor="nameLabel" className="col-sm-2 col-form-label">Name</label>
                      <div className="col-sm-10">
                        <Field
                          value={values.name}
                          name="name"
                          type="text" placeholder="Location name"
                          className={'form-control' + (errors.name && touched.name ? ' is-invalid' : '')} />
                        <ErrorMessage name="name" component="div" className="invalid-feedback" />
                      </div>

                    </div>
                  </div>
                </form>
              </div>
              <div className="col-md-6">
                <table className="table table-striped projects">
                  <thead>
                    <tr>
                      <th >
                        Name
      </th>
                      <th>
                        Adress
             </th>
                      <th>
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                    {locations.map((location, index) =>

                      <tr key={index}>
                        <td>
                          {location.name}
                        </td>
                        <td>
                          {location.address}
                        </td>
                        <td>
                          <button className="btn btn-info btn-sm"
                            onClick={(location) => {

                              setFieldValue('name', location.name)

                            }}
                          >
                            Edit
           </button>
                        </td>
                      </tr>
                    )
                    }
                  </tbody>
                </table>
              </div>
            </>
          )}
        />
      </div>
    );

我基本上是尝试编辑一些数据，但是当我单击编辑按钮时，我收到错误消息A component is changing a controlled input of type text to be uncontrolled.，这是怎么回事？

Answer 1

错误出在按钮上

<button className="btn btn-info btn-sm"
 onClick={(location) => {
 setFieldValue('location', location)
}}
>
Edit
</button>

似乎我错误地覆盖了按钮事件，而我本不应该这样做，我要做的就是将其删除为

onClick={() => {
     setFieldValue('location', location)
    }}

如何设置formik字段值

1 个答案: