亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 路由器不更新子組件參數

React 路由器不更新子組件參數

瀟湘沐 2022-07-01 17:01:50
在我的 React 應用程序中,我無法根據 props 進行子組件更新。子組件從<Link/>暴露給存儲狀態的標簽中獲取道具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;直接訂閱狀態并在添加新股票代碼時重新呈現的組件: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);此處聲明的路由并在單擊時調用 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獲取參數但在狀態更改時不會重新呈現- 當我添加股票代碼時。我使用 Object.assign 更新商店的狀態,訂閱此狀態的其他組件會重新渲染!(所以不存在任何不變性問題)查看 redux devtools 我可以看到狀態已正確更新,我懷疑 PortfolioManagement 不會重新渲染,因為 react 沒有將 Link 的 Params 稱為道具并且不知道它應該觸發重新渲染。
查看完整描述

2 回答

?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

而不是使用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,但無論如何現在state來自props并且組件將重新渲染


編輯


您可以發送的位置對象的用法Link和state位置,如果未通過鏈接調用組件,則上下文將不存在,考慮在Router裝飾時通過常規道具發送道具(我假設是連接到 redux 存儲的組件)


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


查看完整回答
反對 回復 2022-07-01
?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

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



查看完整回答
反對 回復 2022-07-01
  • 2 回答
  • 0 關注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號