我在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.
我不确定错在哪里。下面是我的动态表单渲染代码-
账户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;
包装形式。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>
)
}
)
)
}
一些代码从
临时雇员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创建动态初始值
,如下所示:
js prettyprint-override">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 || ''
}}
>
)
我试图摆脱这个错误信息,但仍然没有成功。 还有Facebook页面的链接,但我仍然不知道该如何找到它。 在输入似乎总是一个非空值,我如何解决这个问题?
我一直有这个错误:一个组件正在将受控输入的类型文本更改为不受控制。输入元件不应从受控切换到不受控(反之亦然)。决定在组件的生命周期内使用受控或不受控制的输入元件。当我尝试将值从数据库输入框点击编辑 这是我的代码:
使用ui textfield时出错 警告:TextField正在将text类型的受控输入更改为不受控。输入元素不应从受控切换到非受控(或反之亦然)。决定在组件的生存期内使用受控还是不受控输入元素
警告:组件正在更改要控制的非受控输入类型复选框。输入元件不应从不受控制切换到受控(反之亦然)。决定在组件的生命周期内使用受控或不受控制的输入元件。 我的代码:
问题内容: 警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。确定在组件的使用寿命中使用受控或非受控输入元素。* 以下是我的代码: 问题答案: 原因是,在您定义的状态下: 字段作为空白对象,因此在第一次渲染期间将是,输入字段的值将为: 因此,输入字段将变得不受控制。 在输入中输入任何值后,状态将变为: 那时输入字段被转换为受控组件;这就是为什么您得
我得到了这个错误,我是新的反应。我看过其他帖子,但仍然不能解决这个问题。我们将不胜感激。谢谢 警告:组件正在更改要控制的电子邮件类型的未控制输入。输入元素不应该从不受控制切换到受控制(反之亦然)。决定在组件的生存期内使用受控还是不受控的输入元素。更多信息在输入(由编辑创建)中,在div(由编辑创建)中,在div(由编辑创建)中,在窗体(由编辑创建)中,在div(由编辑创建)中
我试图更改Select input的值,然后在控制台中得到以下警告。 index.js:1446警告:一个组件正在将text类型的受控输入更改为不受控。输入元素不应从受控切换到非受控(或反之亦然)。决定在组件的生存期内使用受控还是不受控的输入元素。 但我只是以正确的方式更新状态,这是我的代码 有人能提出问题吗?
我正在对我的组件进行排序 我在选择标记中有一个错误。获取错误props.filters.sortby的值最初是日期。当我试图从下拉列表中更改它时,错误发生了。