哆啦的時光機(jī)
2022-12-29 15:18:37
我的頁面有一個導(dǎo)航欄和一個側(cè)邊欄。導(dǎo)航欄由主頁和博客組成博客將呈現(xiàn) BlogHome 組件,該組件將從 db 獲取鏈接,單擊任何鏈接將呈現(xiàn) BlogContent 組件。假設(shè)側(cè)邊欄列出了 Blog1、Blog2 和 Blog3。如果我單擊 Blog1,它會將 Blog1 的內(nèi)容正確呈現(xiàn)到它的一側(cè),但如果我再次單擊 Blog2,它只會更改 URL,而不是 Blog2 的內(nèi)容。請看看我的代碼:導(dǎo)航欄.js <Router> <Container className="p-0" fluid={true}> <Navbar className="border-bottom" bg="transparent" expand="lg"> <Navbar.Brand>{global.config.appname}</Navbar.Brand> <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" /> <Navbar.Collapse id="navbar-toggle"> <Nav className="ml-auto"> <Link className="nav-link" to="/">Home</Link> <Link className="nav-link" to="/blogs/main">Blogs</Link> <Link className="nav-link" to="/contact">Contact</Link> </Nav> </Navbar.Collapse> </Navbar> </Container> <Switch> <Route exact path="/" component={Home}></Route> <Route exact path="/blogs/main" component={BlogHome}></Route> </Switch> </Router>BlogHome.jsexport default class BlogHome extends Component { constructor(props) { super(props); this.state = { data: null,route:null }; } componentDidMount = () => { console.log("BlogHome"); BlogDataService.getAll().then(data => { let data_temp = [] let cnt = 0; for (let item of data.data) { data_temp.push( <MenuItem key={cnt++} icon={<FaBlog />}> <Link to={"/blogs/main/" + item.id}>{item.title}</Link> </MenuItem> ); } this.setState({ data: data_temp }); }) }
1 回答

皈依舞
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個贊
您的 item_id 只設(shè)置了一次并且根本沒有改變。第一次加載組件時它會工作但是當(dāng)你第二次加載時你傳遞了新的項目 ID 但是組件不知道這個變化因此無法做任何事情。
嘗試創(chuàng)建一個獲取數(shù)據(jù)的函數(shù)。在 componentDidmount 中調(diào)用相同的函數(shù)?,F(xiàn)在,當(dāng)它獲得新道具時,就該檢查了。使用 componentDidUpdate。
componentDidUpdate(prevProps, prevState){
if(prevProps.blogId != this.props.blogId){
this.setState({
item_id: this.props.blogId
}, () => { call the function to get the data } )
}
}
添加回答
舉報
0/150
提交
取消