正文从这开始~

总览

当我们把一个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. Spark在Local环境下的使用

    ①    将 spark-3.0.0-bin-hadoop3.2.tgz 文件上传到 Linux (cd /opt/module路径下)并解压缩 ②    修改spark-3.0.0-bin-hado ...

  2. webpack基础知识介绍

    1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...

  3. ABP框架之——数据访问基础架构

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享阅读心得,希望我的文章能成为你成长路上的一块垫脚石,我们一起精进. 几乎所有的业务应用程序都要适用一种数据库基础架构,用来实现数据访问逻辑,以便从数 ...

  4. 图的连通性--Tarjan算法

    一些概念 无向图: 连通图:在无向图中,任意两点都直接或间接连通,则称该图为连通图.(或者说:任意两点之间都存在可到达的路径) 连通分量: G的 最大连通子图 称为G的连通分量. 有向图 (ps.区别 ...

  5. Node.js躬行记(21)——花10分钟入门Node.js

    Node.js 不是一门语言,而是一个基于 V8 引擎的运行时环境,下图是一张架构图. 由图可知,Node.js 底层除了 JavaScript 代码之外,还有大量的 C/C++ 代码. 常说 Nod ...

  6. sqlmap自动检测漏洞并进行渗透

    使用案例靶场为上篇文章介绍的封神台---靶场 https://hack.zkaq.cn/   提示:采用开源靶场里面的猫舍进行渗透注入,仅用于安全防范无安全侵犯 1.首先检测是否已经安装成功sqlma ...

  7. PyTorch保存模型、冻结参数等

    此外可以参考PyTorch模型保存.https://zhuanlan.zhihu.com/p/73893187 查看模型每层输出详情 Keras有一个简洁的API来查看模型的每一层输出尺寸,这在调试网 ...

  8. SmartIDE v0.1.19 - 码云(Gitee)最有价值开源项目奖项、工作区策略、类虚拟机镜像VMLC、Server安装手册

    SmartIDE v0.1.19 (CLI Build 3909, Server Build 3890) 已经发布,本次Sprint主要完成2个重要特性,工作区策略和类虚拟机容器(VM Like Co ...

  9. 这不会又是一个Go的BUG吧?

    hello,大家好呀,我是小楼. 最近我又双叒叕写了个BUG,一个线上服务死锁了,不过幸亏是个新服务,没有什么大影响. 出问题的是Go的读写锁,如果你是写Java的,不必划走,更要看看本文,本文的重点 ...

  10. Spring Data JPA系列2:SpringBoot集成JPA详细教程,快速在项目中熟练使用JPA

    大家好,又见面了. 这是Spring Data JPA系列的第2篇,在上一篇<Spring Data JPA系列1:JDBC.ORM.JPA.Spring Data JPA,傻傻分不清楚?给你个 ...