一文教你如何避免React中常见的8个错误
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
1. 组件卸载后执行状态更新
报错信息: Can’t perform a React state update on an unmounted component
这个报错就是因为在组件树的某个地方,状态更新被触发到已经卸载的组件上了。也就是说,我们不能在组件销毁后设置 state,防止出现内存泄漏。
1 2 3 4 5 6 7 8 9 | const Component = () => { const [data, setData] = useState( null ); useEffect(() => { fetchAsyncData().then((data) => setData(data)); }, []); // ... }; |
比如,在请求数据时,由于跳转到了B页面,A页面的数据请求还在进行中,但是页面已经销毁了,就会出现这种情况。那该如何解决这个问题呢?有两种方法:
(1)组件卸载时取消异步请求
第一种方法(推荐),就是在组件卸载时取消异步请求。一些异步请求库提供了取消异步请求的方法。如果没有使用第三方库,可以使用 AbortController
来取消。这种方法本质上就是在组件卸载时取消副作用:
1 2 3 4 5 6 7 8 9 10 11 12 13 | const Component = () => { const [data, setData] = useState( null ); useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }).then((data) => setData(data)); return () => { controller.abort(); } }, []); // ... }; |
(2)跟踪组件是否已挂载
另外,可以跟踪组件的挂载状态,如果还没挂载或已经卸载,返回 false;否则返回 true:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const Component = () => { const [data, setData] = useState( null ); const isMounted = useRef( true ); useEffect(() => { fetchAsyncData().then(data => { if (isMounted.current) { setData(data); } }); return () => { isMounted.current = false ; }; }, []); // ... } |
不过,不建议使用这种方法。这样保留了未挂载组件的引用,可能会导致内存泄漏和性能问题。
2. 渲染列表时不使用 key
报错信息: Warning: Each child in a list should have a unique key prop
React 开发中最常见的就是遍历数组来渲染组件。在JSX中,可以使用Array.map
将该逻辑嵌入到组件中,并在回调中返回所需的组件。如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { Card } from "./Card" ; const data = [ { id: 1, text: "JavaScript" }, { id: 2, text: "TypeScript" }, { id: 3, text: "React" } ]; export default function App() { return ( <div className= "container" > {data.map((content) => ( <div className= "card" > <Card text={content.text} /> </div> ))} </div> ); } |
这样会收到如下警告:Warning: Each child in a list should have a unique key prop
,这表示需要给生成的每个组件一个唯一的key。所以,要在map
回调返回的JSX的最外层元素添加一个key
值,该值应该是一个字符串或者数字,并且在这个组件列表中应该是唯一的。
1 2 3 4 5 6 7 8 9 10 11 | export default function App() { return ( <div className= "container" > {data.map((content) => ( <div key={content.id} className= "card" > <Card text={content.text} /> </div> ))} </div> ); } |
尽管不遵守这个要求也不会导致应用崩溃,但它可能会导致一些意外的情况。React 会使用这些key
来确定列表中的哪些子项发生了更改,并使用此信息来确定可以重用先前 DOM 的哪些部分,以及在重新渲染组件时应该重新计算哪些部分。 因此,建议添加 key。
3. Hooks 调用顺序错误
报错信息: React Hook "useXXX" is called conditionally. React Hooks must be called in the exact same order in every component render
先来看下面的代码:
1 2 3 4 5 6 7 8 9 | const Toggle = () => { const [isOpen, setIsOpen] = useState( false ); if (isOpen) { return <div>{ /* ... */ }</div>; } const openToggle = useCallback(() => setIsOpen( true ), []); return <button onClick={openToggle}>{ /* ... */ }</button>; }; |
当 isOpen
的值为true
时,就会直接return
那个div
元素。这样当isOpen
的值为true
和false
时useCallback
Hook的调用顺序就不一致了。这时React就会警告我们:React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render
。这其实就是React官方文档中所说的,不要在循环,条件或嵌套函数中调用 Hook, 确保总是在 React 函数的最顶层以及任何 **return**
之前调用他们。遵守这条规则才能确保 Hook 在每一次渲染中都按照同样的顺序被调用。
可以这样来修改上面的代码:
1 2 3 4 5 6 7 8 9 | const Toggle = () => { const [isOpen, setIsOpen] = useState( false ); const openToggle = useCallback(() => setIsOpen( true ), []); if (isOpen) { return <div>{ /* ... */ }</div>; } return <button onClick={openToggle}>{ /* ... */ }</button>; }; |
4. useEffect 缺少依赖
报错信息: React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array
先来看看 React 官网给出的例子:
1 2 3 4 5 6 7 8 9 | function Example({ someProp }) { function doSomething() { console.log(someProp); } useEffect(() => { doSomething(); }, []); } |
在useEffect
中定义空的依赖数组是不安全,因为它调用的 doSomething
函数使用了 someProp
。这时就会报错:React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array
。当props
中的someProp
发生变化时,函数doSomething
的结果就会发生变化,然而useEffect
的依赖数组为空,所以就不会执行回调中的内容。
有两种方式来解决这个问题:
在useEffect
中声明其所需函数,这种方式适用于只需要调用一次的函数,比如初始化函数:
1 2 3 4 5 6 7 8 | function Example({ someProp }) { useEffect(() => { function doSomething() { console.log(someProp); } doSomething(); }, [someProp]); } |
使用useCallback
来定义依赖项,确保当自身依赖发生改变时函数主体也会改变:
1 2 3 4 5 6 7 8 9 | function Example({ someProp }) { const doSomething = useCallback(() => { console.log(someProp); }, [someProp]) useEffect(() => { doSomething(); }, [doSomething]); } |
5. 重新渲染过多
报错信息: Too many re-renders. React limits the number of renders to prevent an infinite loop
这个报错就是说重新渲染过多。React 限制渲染的数量以防止无限循环。当组件在很短的时间有太多状态更新时,就可能会发生这种情况。导致无限循环的最常见原因是:
- 直接在渲染中执行状态更新;
- 未向事件处理程序提供适当的回调。
如果遇到这个警告,可以检查组件的这两个方面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const Component = () => { const [count, setCount] = useState(0); setCount(count + 1); // 渲染中的状态更新 return ( <div className= "App" > { /* onClick 没有正确的回调 */ } <button onClick={setCount((prevCount) => prevCount + 1)}> Increment that counter </button> </div> ); } |
6. 渲染的单条数据为对象
报错信息: Objects are not valid as a React child / Functions are not valid as a React child
在 React 中,我们可以在组件中渲染到 DOM 中的东西有很多,比如:HTML标签、JSX元素、原始 JavaScript 值、JavaScript 表达式等。但是不能将对象和函数渲染到 DOM 中,因为这两个值不会解析为有意义的值,如果渲染了对象或函数,就会报上面的错误。解决这个问题的方法很简单,就是检查渲染的内容是否是有效的值:
1 2 3 4 5 6 7 | const Component = ({ body }) => ( <div> <h1>{ /* */ }</h1> { /* 必须确保 body 是有效的 React child */ } <div className= "body" >{body}</div> </div> ); |
7. 相邻JSX元素没有包装在封闭标记中
报错信息: Adjacent JSX elements must be wrapped in an enclosing tag
这个报错就是说相邻JSX元素必须包装在封闭标记中,也就是必须要有一个根元素:
从 React 开发人员的角度来看,这个组件只会在另一个组件内部使用。 因此,在他们的心智模型中,从一个组件返回两个元素是有意义的,因为生成的 DOM 结构将是相同的,无论外部元素是在此组件中定义还是在父组件中定义。但是,React 无法做出这种假设。该组件可能会在根目录中使用并破坏应用,因为它会导致无效的 DOM 结构。
所以,应该始终将组件返回的多个 JSX 元素包装在一个封闭标记中。可以是一个元素、一个组件或者 React Fragment:
或者直接使用一个空标签来包装两个 JSX 元素:
8. 使用旧的状态
先来看一个计数器的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const Increaser = () => { const [count, setCount] = useState(0); const increase = useCallback(() => { setCount(count + 1); }, [count]); const handleClick = () => { increase(); increase(); increase(); }; return ( <> <button onClick={handleClick}>+</button> <div>Counter: {count}</div> </> ); } |
这里的handleClick
方法会在点击按钮后执行三次增加状态变量count
的操作。那么点击一次是否会增加3呢?事实并非如此。点击按钮之后,count
只会增加1。问题就在于,当我们点击按钮时,相当于下面的操作:
1 2 3 4 5 | const handleClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; |
当第一次调用setCount(count + 1)
时是没有问题的,它会将count
更新为1。接下来第2、3次调用setCount
时,count
还是使用了旧的状态(count为0),所以也会计算出count
为1。发生这种情况的原因就是状态变量会在下一次渲染才更新。
解决这个问题的办法就是,使用函数的方式来更新状态:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const Increaser = () => { const [count, setCount] = useState(0); const increase = useCallback(() => { setCount(count => count + 1); }, [count]); const handleClick = () => { increase(); increase(); increase(); }; return ( <> <button onClick={handleClick}>+</button> <div>Counter: {count}</div> </> ); } |
这样改完之后,React就能拿到最新的值,当点击按钮时,就会每次增加3。所以需要记住:如果要使用当前状态来计算下一个状态,就要使用函数的式方式来更新状态:
以上就是一文教你如何避免React中常见的8个错误的详细内容,更多关于React常见错误避免的资料请关注脚本之家其它相关文章!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
使用react-native-image-viewer实现大图预览
这篇文章主要介绍了使用react-native-image-viewer实现大图预览,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09react使用useState修改对象或者数组的值无法改变视图的问题
这篇文章主要介绍了react使用useState修改对象或者数组的值无法改变视图的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-09-09
最新评论