React 搜索时遇到的坑

一、业务场景：
最近在优化React的天枢项目里面，搜索时遇到了一些问题。为了大家后面遇到和我一样的问题，给大家分享一下

二、问题描述：
1.点击搜索按钮，报以下错误。

TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘HTMLSpanElement’
| property ‘parser’ -> object with constructor ‘FiberNode’
— property ‘socket’ closes the circle

主要原因是参数传过去，打印出来一直显示事件对象，并不是传过去的值（不能传参，只能用useRef全局定义并接收）

解决方案

   <Button type='primary' onClick={Search}>查询</Button> //这里传会一直调接口
//条件搜索
  function Search() {
    getConfigList(
      {
        isShelf:isShelf.current ,  //就用全局来接，不传值
      }
    ).then( (res)=> {
    })
      .catch(function (error) {
        console.log(error);
      })
  }

2.点击radio组件时，需要点击两次才生效

主要原因是参数没传过去，打印出来一直显示事件对象（不能用
const [isShelf, setIsShelf] = useState(undefined)来定义
只能用useRef和current来操作）

  const handleHotText = (i: number) => {
    setCurrentIndex(i)
    console.log(currentIndex)
// 全部
    if (i == 0) {
      // setIsShelf()            //不能用setIsShelf
      isShelf.current = null
      Search()
    } else if (i == 1) {
        // setIsShelf(1)  //不能用setIsShelf
      isShelf.current = 1
        Search()
    } else if (i == 2) {
      // setIsShelf(0)  //不能用setIsShelf
      isShelf.current = 0
      Search()
    }
  }

三、效果展示：
const isShelf = useRef(null);
getConfigList(
{
isShelf:isShelf.current ,
pageNum:pageCode.current,
pageSize:bannerSize.current
}
).then( (res)=> {
console.log(res)
}) .catch(function (error) {
console.log(error);
})

你已经成功了，撒花。
今天的分享到此结束，欢迎小伙伴们一起交流