React报错之react component changing uncontrolled input
正文从这开始~
总览
当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的更多相关文章
- React报错之React hook 'useState' cannot be called in a class component
正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...
- React报错之React Hook useEffect has a missing dependency
正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...
- React报错之React hook 'useState' is called conditionally
正文从这开始~ 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditiona ...
- React报错之React Hook 'useEffect' is called in function
正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- 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,& ...
- SpringBoot整合Swagger2案例,以及报错:java.lang.NumberFormatException: For input string: ""原因和解决办法
原文链接:https://blog.csdn.net/weixin_43724369/article/details/89341949 SpringBoot整合Swagger2案例 先说SpringB ...
- 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 ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
随机推荐
- 128_Power BI父级排名TOPN子级动态展示
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 前些天在和朋友交流Power BI中有这样一个需求,按照父级排名后,需要显示出父级TOPN的子级明细. 如下&l ...
- django框架11
内容概要 用户登录之后跳转到用户登录之前想要访问的页面 django操作cookie补充 django操作session django操作session补充 CBV添加装饰器 django中间件 自定 ...
- 浅谈倍增法求解LCA
Luogu P3379 最近公共祖先 原题展现 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入格式 第一行包含三个正整数 \(N,M,S\),分别表示树的结点个数.询问 ...
- ExtJS 布局-Fit布局(Fit Layout)
更新记录: 2022年5月31日 第一稿. 1.说明 Fit布局只会显示一个子组件,子项组件的尺寸会拉伸到容器的尺寸.当容器进行调整大小(resized),子组件会自动调整去拉伸到付容器的大小. 注意 ...
- 腾讯视频的qlv格式转换为mp4格式
1.点击设置->下载设置->缓存管理 下的文件目录复制; 2复制在 我的电脑路径栏目中 找到缓存目录 文件夹vodcache; 3.打开视频对应文件; 4.打开cmd命令窗口 5.跳转 到 ...
- 记一次grpc server内存/吞吐量优化
背景 最近,上线的采集器忽然时有OOM.采集器本质上是一个grpc服务,网络设备通过grpc协议将数据上报后,采集器进行格式等整理后,发往下一个系统(比如分析,存储). 打开运行环境,发现特性如下: ...
- python 基础知识-day10(面向对象)
1.面向对象的概念 拥有共同属性的一类进行归类的过程叫做面向对象. 2.注意事项 class定义类的时候,类名的首字母必须大写 3.面向对象案例 1 class Person(object): 2 d ...
- 如何获取GC(垃圾回收器)的STW(暂停)时间?
前言 在现代的容器化和微服务应用中,因为分布式的环境和错综复杂的调用关系,APM(Application Performance Monitoring 应用性能监控)显得尤为重要,它通过采集应用程序各 ...
- RPA人力资源简历筛选机器人
简历自动筛选及分析机器人,支持前程无忧.猎聘 1.自动登录招聘网站 2.自动填充简历筛选条件 3.RPA依次读取所筛选的简历信息 4.自动将简历数据复制到本地文档中 5.完成简历信息收集及分析表 6. ...
- Pytorch从0开始实现YOLO V3指南 part5——设计输入和输出的流程
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...