formik 警告，组件正在更改要控制的文本类型的不受控制的输入

Question

我正在 React JS 中开发一个动态表单，当用户单击 Add 按钮时，Register 表单被添加到屏幕上。在注册表格中，我使用 formik 进行验证。

表单动态添加成功，但每当我开始在输入框中输入任何输入时，我都会在控制台中收到以下错误：

Warning: A component is changing an uncontrolled input of type text to be 

controlled. Input elements should not switch from uncontrolled to controlled 

(or vice versa). Decide between using a controlled or uncontrolled input element 

for the lifetime of the component. 

我不确定哪里错了。下面是我的动态表单渲染代码 -

Account.js

import React, { Component } from 'react';

import axios from 'axios';

import {

    Card, CardBody, CardHeader,Button,Col, Row, Form, Container

} from 'reactstrap';

import { Formik, Field, ErrorMessage } from 'formik';

import WrapperForm from './WrapperForm'

class Account extends Component {

  state = {

    wrapperForm: [{}]

  }

  constructor(props) {

    super(props);

  }

  addUser = () => {

    this.setState((prevState) => ({

      wrapperForm: [...prevState.wrapperForm, {}],

    }));

  }

  render() {

    let { wrapperForm } = this.state

    return (

      <Form>

        <Container className="themed-container" fluid={true}>

          <button type="button" onClick={this.addUser}>Add User</button>

          <WrapperForm wrapperForm={wrapperForm} />

        </Container>

      </Form>

    );

  }

}

export default Account;  

WrapperForm.js

const WrapperForm = (props) => {

  return (

    props.wrapperForm.map((val, idx)=> {

      return (

        <Formik 

          key={idx}

          initialValues={{

            email: props.wrapperForm[idx].email || '',

            password: props.wrapperForm[idx].password || '',

            firstName: props.wrapperForm[idx].firstName || '',

            lastName: props.wrapperForm[idx].lastName || '',

            zipCode: props.wrapperForm[idx].zipCode ||  ''

          }}

        

Answer 1

我找到了一种解决方案，也许它会对某人有所帮助。您需要initialValues为 formik 创建动态为：let passwordId = 'password-'+ idx ;let firstNameId = 'firstName-'+ idx;let lastNameId = 'lastName-'+ idx;let zipCodeId = 'zipCode-'+ idx;return (&nbsp; <Formik&nbsp;&nbsp; &nbsp; &nbsp; key={idx}&nbsp; &nbsp; &nbsp; initialValues={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email: props.wrapperForm[idx].email || '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [passwordId]: props.wrapperForm[idx].password || '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [firstNameId]: props.wrapperForm[idx].firstName || '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [lastNameId]: props.wrapperForm[idx].lastName || '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [zipCodeId]: props.wrapperForm[idx].zipCode ||&nbsp; ''&nbsp; &nbsp; &nbsp; }}&nbsp; >)

Answer 2

阅读以上所有评论真的很有帮助，尤其是在理解 react 中表单元素中不受控制和受控组件之间的基本区别。但是，在将 InitialValues 作为属性添加到 Formik 后，我得到了同样的错误。这让我想到了这样一个事实，即每当反应将表单输入视为不受控制（在 DOM 中控制）并结合反应组件中的状态更改功能时，就会发生错误。事实上，我收到了错误，因为在我的 react useState 钩子中初始化的变量名称与我用作表单输入键的表单上的 name 属性不同。如果在 Formik 上添加 InitialValues 属性后出现相同的错误，则应确保您的状态变量与每个表单输入上的名称属性相同。

Answer 3

我的表单上有一个字段，但没有相应的初始值。一旦我将字段添加到初始值（我使用静态值，不必是道具），此错误消息就消失了。我注意到 ppb 的回答改变了initialValues问题中的字段名称，也许这使它们匹配？我假设当指定初始值时组件是受控的，否则不受控制。