Formik 组件更改要控制的文本类型的不受控制输入

Question

我将 Formik 与数组一起使用，其中的项从父级传递并像这样检索：

updateState (){
    this.state.choices = this.props.choices
    this.state.questionId = this.props.questionId
  }
  render() {
    this.updateState()
    var choices = this.state.choices
    console.log(choices)
    return ( ...

我最初将值初始化为空或 0:

  constructor(props){
    super(props);
    this.state = {
      choices : [],
      questionId: 0
    };
  }

虽然这看起来应该可行，但我收到错误消息，指出组件正在将文本类型的不受控制输入更改为受控制。我知道这是由于我使用了 this.state 但我不确定如何真正解决这个问题。

自从我使用 Formik 以来，到目前为止我所做的就是将我的导出更改为如下所示：

  export default withFormik({
  mapPropsToValues: (props) => ({
    choices: [{
    id: '',
    value: '',
    weight: '',
    impact: ''}]
  }),
})(Choices)

目前还不清楚我是否应该映射道具，或者我是否应该使用更像这样的东西：

export default withFormik({
  mapPropsToValues: (props) => ({

    id: '',
    value: '',
    weight: '',
    impact: ''
  }),
})(Choices)

我所知道的是，我无法通过单击将新对象推送到我正在使用的数组上，所以在我弄清楚 un/controlled 输入的状态之前，功能基本上被冻结了元素.

知道我哪里出错了吗？

Answer 1

修复 HTML 和 {choices[index].id} 位清除了这个错误。

例如：

<div className="col">
                        <label htmlFor={choices[index].id}>{choices[index].id}</label>
                        <Field name={choices[index].id} placeholder={choices[index].value} type="text"/>
                        <ErrorMessage name={choices[index].id} component="div" className="field-error" />
                      </div>

Formik 组件更改要控制的文本类型的不受控制输入

Formik component changing an uncontrolled input of type text to be controlled

javascript

forms

reactjs

formik