React 路由器不更新子组件参数

Question

在我的 React 应用程序中，我无法根据 props 进行子组件更新。子组件从<Link/>暴露给存储状态的标签中获取道具

const CallPortfolioManagement= (props) => {

  const { portfolio } = props;

  return (

    <div>

<Link

to={{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 称为道具并且不知道它应该触发重新渲染。

Answer 1

而不是使用useLocation，您可以使用withRouterat PortfolioManagement-&nbsp; import { withRouter } from 'react-router-dom'&nbsp; const PortfolioManagement = (props) => {&nbsp; &nbsp; &nbsp; console.log(props.location && props.location.state)&nbsp;&nbsp; &nbsp;...rest code...&nbsp;}&nbsp; export default withRouter(PortfolioManagement);我知道它很hacky，但无论如何现在state来自props并且组件将重新渲染编辑您可以发送的位置对象的用法Link和state位置，如果未通过链接调用组件，则上下文将不存在，考虑在Router装饰时通过常规道具发送道具（我假设是连接到 redux 存储的组件）<Route path="/portfolios/:id" render={()=> <PortfolioManagement props={...props} />} />

Answer 2

没有找到反应路由器的解决方案，我通过作弊解决了它并让portfolioManagement直接访问商店