setState不会触发渲染？

Question

RT

我想做一个根据路由参数不同，进入的时，下拉框默认选中不同的功能。

const [selected, setSelector] = useState<number>(0)

useEffect(() => {
   // 这个useEffect应该每次进入页面都会执行的
   const { value } = getParams() // 这是使用window.location.href获取URL，然后截取解析传参
   setSeletor(value)
}, [])

selected值传给页面上的下拉框，第一次进入的时候页面会设置下拉框当前的值为传参，但是使用其他路由传参再次进入还是显示之前的值。

当点击下拉框展示下拉列表的时候，才会正确的显示新的值。

这是为什么呢？？？？

Answer 1

思路：
做个打印在useEffect里，看下每次进入页面是否会打印，并且看下value是否是url上的传参一致，调试调试就知道了。

Answer 2

useEffect在这里每次都会执行，那么setSeletor(value) 是不是也会执行。会不会循环了。

Answer 3

首先, 还是得提供一个完整的demo;
然后:

const [selected, setSelector] = useState<number>(0)

useEffect(() => {
   // 这个useEffect应该每次渲染都会执行的
   const { value } = getParams() // 这是使用window.location.href获取URL，然后截取解析传参
   setSeletor(value)
})

根据你提供的这段代码, 进入组件时, 执行顺序如下:

执行useEffect中代码 -> 执行serSeletor函数, 触发重渲染 -> 执行useEffect中代码 -> 执行serSeletor函数, 触发重渲染 -> ...

应该就会一直循环不停吧?

Answer 4

这里你得获取下拉列表，下拉列表渲染后。再去设置正确值试试

Answer 5

已经解决了，主要是框架的问题，框架跳转只隐藏不卸载