瀟湘沐
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} />} />
添加回答
舉報
0/150
提交
取消