React报错之`value` prop on `input` should not be null
正文从这开始~
总览
当我们把一个input
的初始值设置为null
或者覆盖初始值设置为null
时,会产生"value
prop on input
should not be null"警告。比如说,初始值来自于空的API响应。可以使用一个回退值来解决这个问题。
这里有个例子来展示错误是如何发生的。
export default function App() {
// ️ Warning: `value` prop on `input` should not be null.
// Consider using an empty string to clear the component or `undefined` for uncontrolled components.
return (
<div>
<input value={null} />
</div>
);
}
上述代码的问题在于,我们为input
表单的value
属性设置为null
,这是不被允许的。
你也可能从远程API获取你的
input
表单的值,并将其设置为null
。
回退值
为了解决该问题,我们可以通过提供回退值,来确保永远不会为input
表单的value
属性设置null
。
import {useState} from 'react';
const App = () => {
// ️ pass empty string as initial value
const [message, setMessage] = useState('');
const handleChange = event => {
setMessage(event.target.value);
};
// use fallback, e.g.
// value={message || ''}
return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message || ''}
/>
</div>
);
};
export default App;
我们把
state
变量的值初始化为一个空字符串,而不是null
。
这样就可以摆脱警告,除非在你代码的其他地方将state
变量设置为null
。
我们使用逻辑与(||)操作符,如果操作符左侧的为假值(比如说null
),则返回其右侧的值。这可以帮助我们确保input
表单的value
属性永远不会被设置为null
。
defaultValue
如果你借助refs
使用不受控制的input
表单,请不要在input
元素上设置value
属性,使用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报错之`value` prop on `input` should not be null的更多相关文章
- React报错之Style prop value must be an object
正文从这开始~ 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告 ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- 记录微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function
微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 这个报错是在将数组对象通过 ...
- 浏览器报错:unexpected end of input 解决方法
直接上报错代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- React报错之Cannot find name
正文从这开始~ .tsx扩展名 为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把 ...
- hadoop ha环境下的datanode启动报错java.lang.NumberFormatException: For input string: "10m"
hadoop ha环境启动start-dfs.sh的时候datanode启动不了,并且报错. [hadoop@datanode2 ~]$ cat /home/hadoop/hadoop-2.7.3/l ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
- react报错 TypeError: Cannot read property 'setState' of undefined
代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...
- React报错之Cannot find namespace context
正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig. ...
随机推荐
- Spark在Local环境下的使用
① 将 spark-3.0.0-bin-hadoop3.2.tgz 文件上传到 Linux (cd /opt/module路径下)并解压缩 ② 修改spark-3.0.0-bin-hado ...
- webpack基础知识介绍
1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...
- ABP框架之——数据访问基础架构
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享阅读心得,希望我的文章能成为你成长路上的一块垫脚石,我们一起精进. 几乎所有的业务应用程序都要适用一种数据库基础架构,用来实现数据访问逻辑,以便从数 ...
- 图的连通性--Tarjan算法
一些概念 无向图: 连通图:在无向图中,任意两点都直接或间接连通,则称该图为连通图.(或者说:任意两点之间都存在可到达的路径) 连通分量: G的 最大连通子图 称为G的连通分量. 有向图 (ps.区别 ...
- Node.js躬行记(21)——花10分钟入门Node.js
Node.js 不是一门语言,而是一个基于 V8 引擎的运行时环境,下图是一张架构图. 由图可知,Node.js 底层除了 JavaScript 代码之外,还有大量的 C/C++ 代码. 常说 Nod ...
- sqlmap自动检测漏洞并进行渗透
使用案例靶场为上篇文章介绍的封神台---靶场 https://hack.zkaq.cn/ 提示:采用开源靶场里面的猫舍进行渗透注入,仅用于安全防范无安全侵犯 1.首先检测是否已经安装成功sqlma ...
- PyTorch保存模型、冻结参数等
此外可以参考PyTorch模型保存.https://zhuanlan.zhihu.com/p/73893187 查看模型每层输出详情 Keras有一个简洁的API来查看模型的每一层输出尺寸,这在调试网 ...
- SmartIDE v0.1.19 - 码云(Gitee)最有价值开源项目奖项、工作区策略、类虚拟机镜像VMLC、Server安装手册
SmartIDE v0.1.19 (CLI Build 3909, Server Build 3890) 已经发布,本次Sprint主要完成2个重要特性,工作区策略和类虚拟机容器(VM Like Co ...
- 这不会又是一个Go的BUG吧?
hello,大家好呀,我是小楼. 最近我又双叒叕写了个BUG,一个线上服务死锁了,不过幸亏是个新服务,没有什么大影响. 出问题的是Go的读写锁,如果你是写Java的,不必划走,更要看看本文,本文的重点 ...
- Spring Data JPA系列2:SpringBoot集成JPA详细教程,快速在项目中熟练使用JPA
大家好,又见面了. 这是Spring Data JPA系列的第2篇,在上一篇<Spring Data JPA系列1:JDBC.ORM.JPA.Spring Data JPA,傻傻分不清楚?给你个 ...