hooks使用中的问题总结

最新推荐文章于 2024-01-26 15:03:14 发布

原创最新推荐文章于 2024-01-26 15:03:14 发布 · 555 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

react 同时被 3 个专栏收录

11 篇文章

订阅专栏

面试

5 篇文章

订阅专栏

hooks

2 篇文章

订阅专栏

本文探讨了在React中使用useState更新数组时页面不重新渲染的问题。通过实例展示了当直接修改数组并设置状态时，页面可能不会响应更新。提供了解决方案，即使用lodash的深拷贝方法来触发页面重新渲染。

文章目录

- - UseState
  - - - 1. 更改数组时，页面不重新渲染

其实用hooks已经半年多了，遇到了很多问题，每次解决完就忘记了，也没有记录，刚刚又遇到一个问题，总觉得以前见过，但就想不起来当时如何解决的，突然醒悟，还是要记录一下，以便以后查看。如果能帮助更多人就更好了。

tips: 我是慢慢的写的，因为也没啥时间专门写这个，就遇到问题了先快速记一下，后面有时间了再慢慢补充原理吧。
一步一步慢慢来吧。

UseState

1. 更改数组时，页面不重新渲染

问题描述：声明了一个数组simpleRules, 数据结构如下, 页面中渲染这个simpleRules中的数据展示在页面，当我更改simpleRules数据时，正常页面应该跟着变化的。代码操作如下。但是页面却没有变化，但是在handle方法中打印出来的，simpleRules数据是被更改了的。

	const [simpleRules, setSimpleRules] = useState([
		{
			ruleId: 1,
			conditions: [
				{
					text: '条件1',
					id: '1'
				}
			]
		}
	]);

	const handleChangeConditions = useCallback(() => {
		simpleRules[0].conditions.push({text: '条件2', id: '2'});
		setSimpleRules(simpleRules);
	}, [simpleRules]);

先说解决方案：直接暴力深拷呗

	setSimpleRules(_.cloneDeep(simpleRules));