如何设置formik字段值答案

【问题标题】：How to set formik field value如何设置formik字段值
【发布时间】：2020-04-04 08:26:25
【问题描述】：

我正在尝试将保存的值加载到 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. ，做错了什么？

【问题讨论】：

您不需要使用value={values.name}，您可以像onSubmit 一样使用Formik props 来获取您的值。另外你用的是什么版本？请注意 render 方法已被弃用。

标签： reactjs formik

【解决方案1】：

错误出现在按钮中

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

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

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

【讨论】：