前言 在React编程中， 我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两
在React编程中， 我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两个较为常见的，也希望读者们看完这篇文章能够避免踩坑！
背景：
伪代码如下：
import React, { useState, useEffect } from 'react';
const App = () => {
const [userName, setUserName] = useState<string>('')
useEffect(() => {
// 调取后台接口
const data = getData()
// 赋值给对应的State
setUserName(data.userName)
})
return (
<div>
<span>用户名：{userName}</span>
</div>
)
}
export default App;
这样的代码看似没什么问题，逻辑也很正确，但是实际效果会发生什么呢？来看下下面的例子：
import React, { useState, useEffect } from 'react';
const App = () => {
const [count, setCount] = useState(0)
useEffect(() => {
setCount(count+1)
})
return (
<div>
<span>{count}</span>
</div>
)
}
export default App;
页面效果如下：
大家测试一下就会发现，页面上的数字是会无限增长的，而且你的电脑内存一下子Up起来（可以听听你的电脑风扇是不是吹得更猛了~）。
这个结果说明了什么？说明了useEffect()在无限的调用中。
原因分析如下：
解决方案如下：useEffect()的第二个参数加一个空数组即可。
import React, { useState, useEffect } from 'react';
const App = () => {
const [count, setCount] = useState(0)
useEffect(() => {
setCount(count+1)
},[])
return (
<div>
<span>{count}</span>
</div>
)
}
export default App;
那么useEffect()就只会执行一次：
废话不说，直接上案例：
import React, { useState, useEffect } from 'react';
const App = () => {
const [count, setCount] = useState('初始内容')
return (
<div>
<input type="text" value={count} />
</div>
)
}
export default App;
那么页面的效果是这样的：
可以发现我明明尝试输入字段，但是Input的内容依旧无法改变。原因如下：
解决方案：给这个Input框增加一个onChange事件，让其监听到内容的改变，并实时的调用setXXX方法。
代码如下：
import React, { useState, useEffect } from 'react';
const App = () => {
const [count, setCount] = useState('初始内容')
return (
<div>
<input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/>
</div>
)
}
export default App;
页面效果如下：
到此这篇关于React编程中需要注意的两个错误的文章就介绍到这了,更多相关React编程错误内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: React编程中需要注意的两个错误
本文链接: https://www.lsjlt.com/news/125941.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0