正文从这开始~

总览

当我们把一个input的初始值设置为null或者覆盖初始值设置为null时,会产生"valueprop 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的更多相关文章

  1. React报错之Style prop value must be an object

    正文从这开始~ 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告 ...

  2. react 报错的堆栈处理

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

  3. 记录微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function

    微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 这个报错是在将数组对象通过 ...

  4. 浏览器报错:unexpected end of input 解决方法

    直接上报错代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. React报错之Cannot find name

    正文从这开始~ .tsx扩展名 为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把 ...

  6. 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 ...

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

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

  8. react报错 TypeError: Cannot read property 'setState' of undefined

    代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false ...

  9. React报错之Cannot find namespace context

    正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig. ...

随机推荐

  1. MySQL(8) - MySQL的事务机制

    MySQL数据库的事务机制 1.1.事务的概念和特性 1.2.事务的隔离级别 repeatable read是mysql默认的事务隔离级别 #事务A #事务A,临时修改工资,未commit, STAR ...

  2. 分布式下Session一致性问题

    一.Session一致性问题 1.1 什么是Session 用户使用网站的服务,基本上需要浏览器和web服务器进行多次交互,web服务器如何知道哪些请求是来自哪个会话的? 具体方式为:在会话开始时,分 ...

  3. iOS全埋点解决方案-数据存储

    前言 ​ SDK 需要把事件数据缓冲到本地,待符合一定策略再去同步数据. 一.数据存储策略 ​ 在 iOS 应用程序中,从 "数据缓冲在哪里" 这个纬度看,缓冲一般分两种类型. 内 ...

  4. nacos 快速入门

    每日一句 外表可是具有欺骗性的. 每日一句 No victory comes without a price. 凡是成功就要付出代价. 概述 这个快速开始手册是帮忙您快速在您的电脑上,下载.安装并使用 ...

  5. 接口开发-restful

    数据库表设计 1 --员工表 2 create table Employee 3 ( 4 id NUMBER primary key, 5 employeeID NUMBER not null, 6 ...

  6. HtmlParse:一款超轻量级的HTML文件解析和爬取工具

    HtmlParse 是一款基于windwos平台的HTML文档解析工具,可快速构建DOM树,从而轻松实现网页元素的爬取工作.DOM树就是一个HTML文档的节点树,每个节点由:标签(Tag).属性(At ...

  7. 在jupyter中配置c++内核

    安装 xeus-cling conda install xeus-cling -c conda-forg xeus-cling 是一个用于编译解释于C++的Jupyter内核目前,支持Mac与Linu ...

  8. BUUCTF-穿越时空的思念

    穿越时空的思念 音频题的话一般是摩尔斯电码,软件打开音频发现 短的为. 长的为- 空缺的为空格 ..-. ----- ..--- ----. -... -.. -.... ..-. ..... ... ...

  9. JavaGUI——Java图形用户界面

    1.Java GUI 概述 GUI(Graphical User Interface,简称 GUI,图形用户界面)是指采用图形方式显示的计算机操作用户界面,与早期计算机使用的命令行界面相比,图形界面对 ...

  10. 写了个基于 MacOS + iTerm2 自动打开窗口执行命令的工具

    大家好,我是秋风,今天要给大家带来的这个工具是我最近写的 一个 npm 工具.mmt 是基于 MacOS + iTerm2 ,目的主要是为了提高日常生活中的效率,接下来我带大家看看一些常用的一些场景. ...