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

【问题标题】：formik warning, A component is changing an uncontrolled input of type text to be controlledformik 警告，组件正在更改要控制的文本类型的不受控制的输入
【发布时间】：2020-04-05 19:27:09
【问题描述】：

我正在 React Web 中开发动态，当用户单击添加按钮时，注册表单被添加到屏幕。在注册表格中，我使用 formik 集成进行验证。表单动态添加成功，但是当我开始在输入框中输入任何输入时，我在控制台中遇到错误

index.js:1 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 = (e) => {
    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
                        type="email"
                        label="Email"
                        name="email"
                        data-id={index}
                        placeholder="Email"
                        component={customInputForm}
                        id="email"
                        className="email"
                    />
                </Col>

【问题讨论】：

标签： formik react-web

【解决方案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 ||  ''
      }}
  >
)

【讨论】：

我爱你的回答

【解决方案2】：

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

【讨论】：