React中动态路由跳转之后数据请求的问题(死循环,请求位置）

前言：react中使用了动态路由，跳转之后请求数据踩得坑。

如果你用的是类式组件：

坑1：请求放在了constructor或componentDidMount，那么切换导航上的选项卡时就不会在请求新的。这是因为初始化和挂载在组件未销毁时只执行一次，而动态路由切换并未销毁组件。

坑2：请求放在了componentWillUpdate和componentDidUpdate和render这类钩子上，死循环就来了，因为，一更新或渲染就请求数据修改状态值的话，就会再次触发更新和渲染，然后在进行请求,再更改状态值,状态一变又触发更新和渲染...死循环了。

类式组件解决参考：https://blog.csdn.net/qq_44877496/article/details/107745066

如果你用的函数式组件：

坑1：请求在Effect函数中进行请求并修改状态，Effect的参数如果第二个不写，默认模拟的是初始化和更新的生命周期，此时，直接更改状态就会进入死循环，跟类式组件坑2一样。

那么解决来了,(强调本人用的函数式组件解决了坑1实现了功能,类式组件没想到办法）

Effect的第二个参数的取值及含义：

项目结构：

代码如下： (标记重点的是解决的主要性代码）

import OneType from '../../components/OneType/OneType'//引入动态路由的导航组件
import {getGoodList } from "../../network/request";//自己封装的网络请求
import React ,{useEffect,useState}from 'react'//重点：引入的Hooks函数
export default function TypePage(props) {//函数式组件导出
  //  eslint-disable-next-line （这个是之前解决eslint的检测用的，不过eslint的问题可以点击链接：https://blog.csdn.net/qq_43440532/article/details/121304188
  const {type} = props.match.params;//重点：监测动态路由切换时的props中match中的params字段
  // eslint-disable-next-line
  const [new_list,change_new_list] = useState([])//重点：使用Hooks定义商品状态数据
 useEffect(()=>{//重点：使用Hooks中的这个函数，以下写法可以解决上面提到的函数式坑1问题
   if(type){//重点：需要把请求写到if里面去，这个判断就是为了防止死循环，只有监测到路由改变了才请求数据
    getGoodList({"type_one":props.match.params.type}).then(res=>{//调用数据请求方法
      change_new_list(res)//赋值给商品状态数据
    })
   }
      // eslint-disable-next-line
},[type])//重点：这里面写的就是监测的值，useEffect这里面的第二个参数可以参考上面的解释
// 下面就正常渲染即可
  return (
   <div>
        <OneType></OneType>
        <ul>
          {
            new_list&& new_list.map(item=>{
              return(
                <li key={item.Id}>{item.type_two}</li>
              )
            })
          }
        </ul>

    </div>
  )
}