关于useEffect的通信监听（更新ing）

两种关于useEffect的通信监听

1.对PubSub订阅——发布的监听

注意：它应用在订阅组件一直在的情况，一旦发布数据页面跳转，页面上A经历：出现、消失、出现，那么A订阅组件是接收不到消息的

2.对location信息的监听

注意：有时候需要通过按钮点击事件，触发页面跳转，会用到useNavigate（），用法百度很多，这里需要注意的是要判断location.state是否为空,因为不只是携带参数的页面跳转，还有无携带参数直接跳转的，打个样：

 

  const [bookList, setBookList] = useState([
    { id: '001', name: "示例1", author: '示例1', publisher: '示例1',img:''}
    ,{ id: '002', name: "示例2", author: '示例2', publisher: '示例2',img:''}
  ]);
  const location = useLocation();
  // // 监测搜索框的书籍book是否提交到选择列表页
  useEffect(() => {
    console.log(111111)
    if(location.state===null) {return}
    if(location.state) {
      setBookList(bookList=>[...bookList,...location.state])
      console.log('我是书籍列表页过来的',location.state)
    }
    // console.log('我是设置轮播构图页:',bookList)
  },[location.state])

 

待更。。。

 

搜索

复制