正文从这开始~

总览

input的值被初始化为undefined,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled input to be controlled"警告。为了解决该问题,将input的值初始化为空字符串。比如说,value={message || ''}

这里有个例子来展示错误是如何发生的。

import {useState} from 'react';

const App = () => {
// ️ didn't provide an initial value for message
const [message, setMessage] = useState(); const handleChange = event => {
setMessage(event.target.value);
}; return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message}
/>
</div>
);
}; export default App;

上面代码的问题在于,message变量被初始化为undefined,因为我们没有在useState钩子中为其传递初始值。

备用值

解决该错误的一种方式是,如果input的值为undefined,那么就提供一个备用值。

import {useState} from 'react';

const App = () => {
const [message, setMessage] = useState(); const handleChange = event => {
setMessage(event.target.value);
}; // ️ value={message || ''} return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message || ''}
/>
</div>
);
}; export default App;

我们使用逻辑与(||)操作符,如果操作符左侧的为假值(比如说undefined),则返回其右侧的值。

如果message变量的值存储为undefined,我们将空字符串作为备用值进行返回。

useState

另一种解决方案是,在useState钩子中为state变量传递初始值。

import {useState} from 'react';

const App = () => {
// ️ pass an initial value to the useState hook
const [message, setMessage] = useState(''); const handleChange = event => {
setMessage(event.target.value);
}; return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message}
/>
</div>
);
}; export default App;

useState钩子中传递初始值可以避免警告,因为此时message变量并没有从undefined变更为一个值。

引起警告的原因是,当message变量在没有值的情况下被初始化时,它会被设置为undefined

传递一个像value={undefined}这样的属性,就等于根本没有传递value属性。

一旦用户在input中开始输入,value属性就会被传递到input表单,输入就会从不受控变为受控,这是不被允许的。

defaultValue

注意,如果你使用一个不受控制的input表单,你应该使用defaultValue属性而不是value

import {useRef} from 'react';

const App = () => {
const inputRef = useRef(null); function handleClick() {
console.log(inputRef.current.value);
} return (
<div>
<input
ref={inputRef}
type="text"
id="message"
name="message"
defaultValue="Initial value"
/> <button onClick={handleClick}>Log message</button>
</div>
);
}; export default App;

上述示例使用了不受控制的input。注意input表单上并没有设置onChange或者value属性。

你可以使用defaultValue属性来为不受控制的input传递初始值。然而,这一步骤不是必要的,如果你不想设置初始值,你可以省略该属性。

当使用不受控制的input表单时,我们使用ref来访问input元素。每当用户点击例子中的按钮时,不受控制的input 的值都会被记录下来。

你不应该为不受控制的input设置value属性,因为这将使input表单不可变,你将无法在其中输入。

React报错之react component changing uncontrolled input的更多相关文章

  1. React报错之React hook 'useState' cannot be called in a class component

    正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...

  2. React报错之React Hook useEffect has a missing dependency

    正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...

  3. React报错之React hook 'useState' is called conditionally

    正文从这开始~ 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditiona ...

  4. React报错之React Hook 'useEffect' is called in function

    正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...

  5. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  6. npm install 报错 error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,"d' 解决办法

    npm install 报错 : error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,& ...

  7. SpringBoot整合Swagger2案例,以及报错:java.lang.NumberFormatException: For input string: ""原因和解决办法

    原文链接:https://blog.csdn.net/weixin_43724369/article/details/89341949 SpringBoot整合Swagger2案例 先说SpringB ...

  8. React报错:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,

    今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...

  9. React报错 :browserHistory doesn't exist in react-router

    由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...

随机推荐

  1. 115_Power Pivot之HR薪酬计算:公积金、社保、个税、实发工资相关

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 1.之前写了一个关于入离调转的pp应用,现在个税新增专项附加扣除项目,借此写一个关于薪酬计算的案例: 2.本案例 ...

  2. 关于ECharts图表反复修改都无法显示的解决方案

    解决方案:清空浏览器所有记录,再次刷新即可

  3. IOU->GIOU->CIOU->Focal_loss

    IOU->GIOU->CIOU->Focal_loss 参考b站 总览 2022-1-3号补充 该链接下关于算是函数讨论 https://zhuanlan.zhihu.com/p/1 ...

  4. mac安装java环境

    1.java安装包获取: 链接:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 2.验证安装是否成 ...

  5. 关于基础RMQ——ST算法

    RMQ,Range Maximum/Minimum Query,顾名思义,就是询问某个区间内的最大值或最小值,今天我主要记录的是其求解方法--ST算法 相对于线段树,它的运行速度会快很多,可以做到O( ...

  6. 题解 P7075 [CSP-S2020] 儒略日

    当时考场上因为这个炸掉,一年后回来复仇. 这里提供一个与大多数人不一样的做法. 首先考虑一个简单一些的问题,怎么应付单个询问? 不难想到,我们对于一个日期,让他从 \(-4713\) 年 \(1\) ...

  7. 通过一次生产case深入理解tomcat线程池

    最近生产上遇到一个case,终于想明白了原因,今天周末来整理一下 生产case 最近测试istio mesh的预热功能(调用端最小连接数原则) 来控制调用端进入k8s刚扩出来的容器的流量 因为刚启动的 ...

  8. 20212115 实验三 《python程序设计》实验报告

    实验报告 20212115<python程序设计>实验三报告 课程:<Python程序设计>班级: 2121姓名: 朱时鸿学号:20212115实验教师:王志强老师实验日期:2 ...

  9. Mac Book安装Windows发烫的问题

    Mac Book安装Windows后,电脑发烫,风扇一直高速旋转.针对此问题百度搜索了一下, 大多数人说更改电源选项,由"平衡"模式改为"节能"模式,亲身体验了 ...

  10. 『忘了再学』Shell基础 — 32、Shell中test测试命令详解

    目录 1.test测试命令 (1)test命令介绍 (2)test命令使用方式 (3)示例 2.按照文件类型进行判断 3.按照文件权限进行判断 4.两个文件之间进行比较 5.两个整数之间比较 6.字符 ...