我正在 React JS 中开发一个动态表单,当用户单击“添加”按钮时,“注册”表单将添加到屏幕上。在注册表单中,我使用 Formik 进行验证。
表单动态添加成功,但每当我开始在输入框中输入任何输入时,我都会在控制台中收到以下错误:
警告:组件正在将文本类型的不受控制的输入更改为 受控。输入元素不应从不受控切换到受控 (或相反亦然)。在组件的生命周期内决定使用受控或非受控输入元件。
不知道哪里错了。下面是我的动态表单渲染代码 -
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>
)
}
我找到了一个解决方案,也许会对某人有所帮助。您需要为 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 || ''
}}
>
)
将 InitialValues 作为属性添加到 Formik 后,我遇到了同样的错误。这让我意识到,每当 React 将表单输入视为不受控制(在 DOM 内受控)并与 React 组件内的状态更改功能相结合时,就会发生错误。
事实上,我收到错误是因为在我的 React useState 挂钩中初始化的变量名称与我用作表单输入的密钥的表单上的 name 属性不同。
如果在 Formik 上添加 InitialValues 属性后遇到相同的错误,您应该确保您的状态变量与每个表单输入上的名称属性相同。
我的表单上有一个字段,但没有相应的初始值。一旦我将字段添加到初始值(我使用了静态值,没有have成为道具),此错误消息就消失了。
我注意到 ppb 的答案更改了问题中
initialValues
中的字段名称,也许这使它们匹配?
我认为当指定初始值时该组件受到控制,否则不受控制。