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. ...
随机推荐
- MySQL(8) - MySQL的事务机制
MySQL数据库的事务机制 1.1.事务的概念和特性 1.2.事务的隔离级别 repeatable read是mysql默认的事务隔离级别 #事务A #事务A,临时修改工资,未commit, STAR ...
- 分布式下Session一致性问题
一.Session一致性问题 1.1 什么是Session 用户使用网站的服务,基本上需要浏览器和web服务器进行多次交互,web服务器如何知道哪些请求是来自哪个会话的? 具体方式为:在会话开始时,分 ...
- iOS全埋点解决方案-数据存储
前言 SDK 需要把事件数据缓冲到本地,待符合一定策略再去同步数据. 一.数据存储策略 在 iOS 应用程序中,从 "数据缓冲在哪里" 这个纬度看,缓冲一般分两种类型. 内 ...
- nacos 快速入门
每日一句 外表可是具有欺骗性的. 每日一句 No victory comes without a price. 凡是成功就要付出代价. 概述 这个快速开始手册是帮忙您快速在您的电脑上,下载.安装并使用 ...
- 接口开发-restful
数据库表设计 1 --员工表 2 create table Employee 3 ( 4 id NUMBER primary key, 5 employeeID NUMBER not null, 6 ...
- HtmlParse:一款超轻量级的HTML文件解析和爬取工具
HtmlParse 是一款基于windwos平台的HTML文档解析工具,可快速构建DOM树,从而轻松实现网页元素的爬取工作.DOM树就是一个HTML文档的节点树,每个节点由:标签(Tag).属性(At ...
- 在jupyter中配置c++内核
安装 xeus-cling conda install xeus-cling -c conda-forg xeus-cling 是一个用于编译解释于C++的Jupyter内核目前,支持Mac与Linu ...
- BUUCTF-穿越时空的思念
穿越时空的思念 音频题的话一般是摩尔斯电码,软件打开音频发现 短的为. 长的为- 空缺的为空格 ..-. ----- ..--- ----. -... -.. -.... ..-. ..... ... ...
- JavaGUI——Java图形用户界面
1.Java GUI 概述 GUI(Graphical User Interface,简称 GUI,图形用户界面)是指采用图形方式显示的计算机操作用户界面,与早期计算机使用的命令行界面相比,图形界面对 ...
- 写了个基于 MacOS + iTerm2 自动打开窗口执行命令的工具
大家好,我是秋风,今天要给大家带来的这个工具是我最近写的 一个 npm 工具.mmt 是基于 MacOS + iTerm2 ,目的主要是为了提高日常生活中的效率,接下来我带大家看看一些常用的一些场景. ...