第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React 路由器不更新子組件參數(shù)

React 路由器不更新子組件參數(shù)

瀟湘沐 2022-07-01 17:01:50
在我的 React 應(yīng)用程序中,我無法根據(jù) props 進(jìn)行子組件更新。子組件從<Link/>暴露給存儲(chǔ)狀態(tài)的標(biāo)簽中獲取道具const CallPortfolioManagement= (props) => {  const { portfolio } = props;  return (    <div><Linkto={{pathname: `/portfolios/${portfolio.name}`,state: { portfolio: portfolio},}}>      {portfolio.name}</Link>    </div>  );};const mapStateToProps = (state) => {  return {    portfolio: getPortfolio(state),  };};export default connect(mapStateToProps)(CallPortfolioManagemnt);投資組合管理組件是:const PortfolioManagement = (props) => {  const portfolio = useLocation().state.portfolio;  return (    <> {portfolio.stocks.map((stock, index) => (   <div key={stock.symbol}>      <h1>       {stock.symbol}      </h1>   </div>  ))}  </>  );};export default PortfolioManagement;直接訂閱狀態(tài)并在添加新股票代碼時(shí)重新呈現(xiàn)的組件:const RenderLastStock= (props) => {  const renderLast () => {    var stocks;    if (props.portfolio) {      stocks = props.portfolio["stocks"];      return <button>{stocks[stocks.length - 1]].symbol}</button>;    }  };  return (    <>      renderLast ()}    </>  );};const mapStateToProps = (state) => {  return { tasks: getLoadingTasks(state), portfolios: getPortfolios(state) };};export default connect(mapStateToProps)(RenderLastStock);此處聲明的路由并在單擊時(shí)調(diào)用 PortfolioManagement:function App(props) { useEffect(() => {    props.getPortfolios();  }, []);  return (    <Router>      <div className="App">        <Switch>            <PrivateRoute>                   <Route path="/portfolios/:id" component={PortfolioManagement} />            </PrivateRoute>        </Switch> </div>    </Router>  );}問題是 PortfolioManagement獲取參數(shù)但在狀態(tài)更改時(shí)不會(huì)重新呈現(xiàn)- 當(dāng)我添加股票代碼時(shí)。我使用 Object.assign 更新商店的狀態(tài),訂閱此狀態(tài)的其他組件會(huì)重新渲染?。ㄋ圆淮嬖谌魏尾蛔冃詥栴})查看 redux devtools 我可以看到狀態(tài)已正確更新,我懷疑 PortfolioManagement 不會(huì)重新渲染,因?yàn)?react 沒有將 Link 的 Params 稱為道具并且不知道它應(yīng)該觸發(fā)重新渲染。
查看完整描述

2 回答

?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

而不是使用useLocation,您可以使用withRouterat PortfolioManagement-


  import { withRouter } from 'react-router-dom'


  const PortfolioManagement = (props) => {

      console.log(props.location && props.location.state) 

   ...rest code...

 }

  export default withRouter(PortfolioManagement);

我知道它很hacky,但無論如何現(xiàn)在state來自props并且組件將重新渲染


編輯


您可以發(fā)送的位置對(duì)象的用法Link和state位置,如果未通過鏈接調(diào)用組件,則上下文將不存在,考慮在Router裝飾時(shí)通過常規(guī)道具發(fā)送道具(我假設(shè)是連接到 redux 存儲(chǔ)的組件)


<Route path="/portfolios/:id" render={()=> <PortfolioManagement props={...props} />} />


查看完整回答
反對(duì) 回復(fù) 2022-07-01
?
忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個(gè)贊

沒有找到反應(yīng)路由器的解決方案,我通過作弊解決了它并讓portfolioManagement直接訪問商店



查看完整回答
反對(duì) 回復(fù) 2022-07-01
  • 2 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)