为什么会不停的发送请求？

老师您好：

视频5分30秒的地方，通过下面的代码发送请求，会不停地发送请求，导致死循环。

代码：

function Cart() {
    const { data } = useRequest<ResponseType>({
        url: 'cartProducts.json',
        method: 'GET'
    });
    console.log(data);

请问这样发送请求为什么会导致死循环？视频中Dell老师说是因为请求参数对象会不停地变化导致，这点我没有理解，能详细说明下吗？

晓之蛇 2024-02-20

源自：TS + React 实现「欢乐购」项目 4-8 购物车实现动态话数据渲染（上）

收起

1回答

晓之蛇提问者 2024-02-20 12:51:01

1、为什么请求参数对象会不停地变化？

2、为什么请求参数对象变化了，会驱动Cart组件的重新渲染？Tips：我的理解是声明在useState中的状态/变量，数据改变才会驱动组件重新渲染呀。

收起回答

好帮手慕久久 #1

同学你好，解答如下：
1、数据data是通过useRequest方法拿到的。而useRequest方法中，由于没有传选项manual，所以真正的请求是通过如下代码发送的：
即，是在useEffect中，通过request方法获取到的数据。
useEffect这个方法，可以在其第二个参数中设置其执行时机。比如上图，当options和request发生改变的时候，就会自动执行useEffect中的代码：
即只要options改变，就会重复执行request，进而重复发送请求。
2、通过useState定义的数据改变时，会触发页面更新。以如下代码为例，当setData方法执行时，就会改变data的值，进而就会触发页面更新：
3、Cart组件首次加载时，会执行如下代码，调用一次useRequest方法，进而执行一次request方法，发送一次请求：
请求成功后，就会更新多个通过useState定义的数据，比如：
此时，就会造成页面更新，进而重复执行Home组件中的代码，重复执行useRequest方法。
4、对象是复杂数据类型，在内存中保存的是地址，即使两个对象长得一模一样，也不是同一个数据，比如：
同理，由于Home组件会重复多次渲染，每次执行useRequest都会传入一个对象：
即使每次传入的对象，虽然长得一样，但本质上，并不是同一个对象。此时，对于useRequest而言，它的options改变了，对应第1条回复，就会重复请求。
祝学习愉快！

2024-02-20 13:50:36