A component is changing an uncontrolled input to be controlled

165 阅读1分钟

问题

在使用@Material UI框架的Input组件做登录注册页时,会报"A component is changing an uncontrolled input to be controlled"的错误

解决

这个警告发生是因为在输入组件的渲染阶段,值来自不明确的到一个定义值.

  1. defaultValue = ""

  2. value = {undefined || "" }

        <OutlinedInput
            required
            onChange={handleChange('captcha')}
            value={formForget.captcha || ''}
            fullWidth
            error={errors.verifyCode}
            name="VerificationCode"
            placeholder="The verification code please enter the email received"
            type="text"
            endAdornment={
                <LoadingButton
                    className="verify-code"
                    disabled={verify.clicked}
                    loading={verify.loading}
                    onClick={getVerifyCode}
                    size="large"
                    style={{ height: '50px', width: '300px' }}
                    color="secondary"
                    // fullWidth
                    variant="contained"
                    sx={{ mt: 3, mb: 2 }}
                >
                    {verify.clicked ? `Please try again in ${duration} seconds` : 'Secode'}
                </LoadingButton>
            }
        />