组件正在更改要控制的不受控制的输入。这可能是由于值从未定义更改为已定义值所致

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value

提问人:Saif eldeen Adel 提问时间:1/31/2021 更新时间:1/31/2021 访问量:353

问:

所以我使用 Ant 设计进行表单和验证。但是我使用了我自己的输入字段,而不是他们的 .但现在我不断收到这个警告。即使我已经设置了他们的状态并且没有将他们的值设置为未定义。然后,我还有将不断设置其新状态的处理程序。那么这到底是怎么回事??FormInputInput

const FormInput = styled.input`
    width: 280px;
    padding: 10px 18px;
    background-color: #E5EBDF;
    color: #545454;
    font-size: 12pt;
    border-radius: 10px;
    outline: none;
    border:none;

    &::placeholder {
        color: #B0B0B0;
    }

    &:hover {
        background-color: #E0E6DA
    }

`


const FormButton = styled.button `
    outline: none;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    background-color: #f06e6c;
    color: #FAFFEB;
    margin-top: 5px;

    &:hover {
        background-color: #FF8987
    }
    
`

function Login({history, isAuthenticated, error, login}) {
    // State variables to make input fields controlled components
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")

    const onFinish = (values) => {
        console.log('Received values of form: ', values.username, values.password);

    };

    // Fucntions for setting state
    const handleUsername = (event) => {
        setUsername(event.target.value)
    }

    const handlePassword = (event) => {
        setPassword(event.target.value)
    }

    return (
        <LoginForm>
            <Header>Login!</Header>
            <Form
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            
            onFinish={onFinish}
            size='large'>
            <Form.Item
                name="username"
                rules={[
                {
                    required: true,
                    message: 'Please input your Username!',
                },
                
                ]}
                // style={{marginBottom: 10}}
            >
                <FormInput placeholder="Username"  value={username} onChange={handleUsername} autoComplete="on"/>

            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                {
                    required: true,
                    message: 'Please input your Password!',
                },
                { min: 5, message: 'Minimum 5 characters.' },
                ]}

            >
                <FormInput placeholder="Password" type="password" value={password} onChange={handlePassword}  autoComplete="on"/>
                
            </Form.Item>

            <div>
                {
                    error &&
                    <Error>Login unsuccessful, <br></br> check username and password</Error>
                }
            </div>
            <Form.Item style={{textAlign: 'center'}}>
                <FormButton htmltype="submit"> Log in </FormButton> Or <FormLink><Link to="/register" className="linkStyle">register now!</Link></FormLink>
            </Form.Item>
            </Form>
        </LoginForm>
    )
}
JavaScript 反应 JS 蚂蚁

评论

0赞 1/31/2021
你的实际代码是什么,你在哪里使用这些代码?
0赞 Saif eldeen Adel 1/31/2021
好吧,在登录功能中使用它们。Prolly shoulve 保留了这条线。但它就在控制台登录 onFinish 函数之后。 就是这样。因为这是我从 redux 映射到 props 的一个函数。我认为这无关紧要,登录逻辑有效,但我不断收到此警告。我应该阅读更多关于受控和不受控制的信息,因为我需要哪一个。login(values.username, values.password)

答: 暂无答案