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)

我所知道的是，我無法單擊將一個新對象推入正在使用的陣列上，因此該功能基本上被凍結，直到我能確定出不受控制的輸入元素的狀態為止。

知道我要去哪里錯了嗎？

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>