成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

connect和next的withRouter共同時(shí)候時(shí)踩坑

defcon / 3408人閱讀

摘要:?jiǎn)栴}重現(xiàn)當(dāng)同時(shí)使用兩者時(shí),在代碼中切換并不會(huì)重新組件,代碼如下問題原因本身將組件變?yōu)?,的并沒有對(duì)做任何處理,而是直接返回。源碼源碼解決方案將包在外層使用。在使用時(shí)將組件的值默認(rèn)改為。

問題重現(xiàn)

當(dāng)同時(shí)使用兩者時(shí),在代碼中切換router并不會(huì)重新reRender組件,代碼如下:

export default connect((state: any) => {
  return {
    x: state.common.x,
  }
})(withRouter(Index))
問題原因

connect本身將組件變?yōu)閜ureComponent,next的withRouter并沒有對(duì)router做任何處理,而是直接返回。

connect 源碼
return function connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps,
  {
    pure = true,
    areStatesEqual = strictEqual,
    areOwnPropsEqual = shallowEqual,
    areStatePropsEqual = shallowEqual,
    areMergedPropsEqual = shallowEqual,
    ...extraOptions
  } = {}
) {}
withRouter源碼
render() {
  return 
}
解決方案

1、將withRouter包在connect外層使用。

export default withRouter(
  connect((state: any) => {
    return {
      x: state.common.x,
    }
  })(Index),
)

2、在使用connect時(shí)將組件pure的值默認(rèn)改為false。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/109940.html

相關(guān)文章

  • react-router @4用法整理

    摘要:官方文檔源碼這篇文章主要介紹了的基本用法包括動(dòng)態(tài)路由編程式導(dǎo)航等安裝用法動(dòng)態(tài)路由的基本用法編程式導(dǎo)航總結(jié)安裝用法示例代碼關(guān)于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫在后面關(guān)于路由匹配默認(rèn)寫在路由末尾前 router@4 react-router@4官方文檔 github源碼 這篇文章主要介紹了react-router@4的基本用法,包括動(dòng)態(tài)路由,編程式...

    piglei 評(píng)論0 收藏0
  • TypeScript 3.0 + React + Redux 最佳實(shí)踐

    摘要:首先聲明這篇文章是想說(shuō)明一下最新版本的的新特性帶來(lái)的極大的開發(fā)體驗(yàn)提升而不是如何利用開發(fā)應(yīng)用這個(gè)特性就是對(duì)的支持在的中有說(shuō)明具體可以參考這里在版本之前我們?cè)陂_發(fā)應(yīng)用尤其是在配合一類庫(kù)的時(shí)候經(jīng)常用到諸如之類的封裝而這些函數(shù)其實(shí)都可以用裝飾器的 首先聲明, 這篇文章是想說(shuō)明一下最新版本的 TypeScript(3.0) 的新特性帶來(lái)的極大的 React 開發(fā)體驗(yàn)提升. 而不是如何利用 Ty...

    CloudwiseAPM 評(píng)論0 收藏0
  • Umi.js

    摘要:,中文可發(fā)音為烏米,是一個(gè)可插拔的企業(yè)級(jí)應(yīng)用框架。以路由為基礎(chǔ)的,支持類的約定式路由,以及各種進(jìn)階的路由功能,并以此進(jìn)行功能擴(kuò)展,比如支持路由級(jí)的按需加載。全局存于目錄,所有頁(yè)面都可引用頁(yè)面不能被其他頁(yè)面所引用。 umi,中文可發(fā)音為烏米,是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架。umi 以路由為基礎(chǔ)的,支持類 next.js 的約定式路由,以及各種進(jìn)階的路由功能,并以此進(jìn)行功能擴(kuò)展...

    30e8336b8229 評(píng)論0 收藏0
  • Router入門0x205: react-route + redux + react 集成

    摘要:概述這一章終于大集成了集成源碼效果說(shuō)明集成主要是用到庫(kù)集成源碼效果說(shuō)明主要用到庫(kù),是針對(duì)庫(kù)在環(huán)境下的封裝組件,注入等屬性接管跟組件指定路由和組件的對(duì)應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說(shuō)明主要用到庫(kù)都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...

    yiliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<