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

Question

我正在用 React JS 开发一个动态表单，当用户点击“添加”按钮时，“注册”表单就会添加到屏幕上。在注册表格中，我使用 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 ||  ''
          }}
        >
          {({ values }) => (
            <Row style={{ marginBottom: "2em" }}>
              <Card>
                <CardHeader>Register</CardHeader>
                <CardBody>
                  <Temp index={idx} />
                </CardBody>
              </Card>
            </Row>
          )}
        </Formik>  
      )
    })
  )
}

Temp.js

const Temp = ({ index }) => {
  let passwordId = 'password-'+ index;
  let firstNameId = 'firstName-'+ index;
  let lastNameId = 'lastName-'+ index;
  let zipCodeId = 'zipCode-'+ index;

  return (
    <Card body outline color="primary">
      <CardTitle>Create Profile</CardTitle>
      <Row form>
        <Col md={6}>
          <Field
            className="email"
            component={customInputForm}
            data-id={index}
            id="email"
            label="Email"
            name="email"
            placeholder="Email"
            type="email"
          />
        </Col>
      </Row>
    </Card>
  )
}

Answer 1

我找到了一个解决方案，也许它会对某人有所帮助。您需要为 formik 创建动态 initialValues 为：

let passwordId = 'password-'+ idx ;
let firstNameId = 'firstName-'+ idx;
let lastNameId = 'lastName-'+ idx;
let zipCodeId = 'zipCode-'+ idx;

return (
  <Formik 
      key={idx}
      initialValues={{
          email: props.wrapperForm[idx].email || '',
          [passwordId]: props.wrapperForm[idx].password || '',
          [firstNameId]: props.wrapperForm[idx].firstName || '',
          [lastNameId]: props.wrapperForm[idx].lastName || '',
          [zipCodeId]: props.wrapperForm[idx].zipCode ||  ''
      }}
  >
)

Answer 2

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

Answer 3

我的表单上有一个字段，但没有对应的初始值。一旦我将字段添加到初始值（我使用静态值，没有作为道具），此错误消息就消失了。

我注意到 ppb 的回答更改了问题中 initialValues 中的字段名称，也许这使它们匹配？

我假设在指定初始值时组件受控，否则不受控制。

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

formik warning, A component is changing an uncontrolled input of type text to be controlled

javascript

reactjs

react-web

formik