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表单不可变，你将无法在其中输入。
原文链接：bobbyhadz.com/blog/react-…
以上就是react component changing uncontrolled input报错解决的详细内容，更多关于react component uncontrolled报错的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了React如何实现代码分割Code Splitting示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React Native全面屏状态栏和底部导航栏适配教程详细讲解
最近在写 React Native 项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案，这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程2023-01-01
这篇文章主要介绍了React 高阶组件应用，详细的介绍了什么是React高阶组件和具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
React获取Java后台文件流并下载Excel文件流程解析
这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是属于web前端领域CSS的一种布局方案，下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了React使用State Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了Vite + React 如何从0到1搭建一个开源组件库，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
本文主要介绍了React 性能优化之非必要的渲染问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
使用 React Router Dom 实现路由导航的详细过程
React Router Dom 是 React 应用程序中用于处理路由的常用库,它提供了一系列组件和 API 来管理应用程序的路由,这篇文章主要介绍了使用 React Router Dom 实现路由导航,需要的朋友可以参考下2024-03-03
这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论