![](/img/trans.png)
[英]how to maintain history state by using react-router-dom among components?
[英]Using state from components not loaded with react-router-dom
我使用星球大战 API 的示例重新格式化了问题。 我遇到的问题是尝试使用 PeoplePage 中的 state 并在使用 react-router-dom 时传递给 CounterPage。 这是我真实网站的一个小例子。 我试图用这个例子缩小实际问题的范围。 我希望这能澄清我正在努力实现的目标。 谢谢!
import React from 'react';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
class ExampleApp extends React.Component{
constructor(){
super()
this.state = {
starWarsPeople:[],
stateNumber:0
}
}
numberHandler(number){
console.log('number',number)
this.setState({stateNumber: this.state.stateNumber + number})
}
componentDidMount(){
fetch('https://swapi.dev/api/people')
.then(response => response.json())
.then(data =>this.setState({starWarsPeople:data}))
}
render(){
const {starWarsPeople,stateNumber} = this.state
console.log(stateNumber);
return(
<Router>
<div>
<Switch>
/* Issue----->*/ <Route path ='/people' exact render = /*Render is where I am stuck */
{starWarsPeople.length !==0
?
<PeoplePage prop1 = {starWarsPeople} increment ={this.numberHandler.bind(this)}/>
:
<div>loading...</div>
}
/>
/* Issue----->*/ <Route path ='/counter' exact render =
/*render is where I am stuck, interval will not go to count prop when this is loaded*/
{starWarsPeople.length !==0
?
/*this example will render but not sure if its right and the interval will not work:
<Route path ='/counter' exact render = {
(props)=><CounterPage {...props} people ={starWarsPeople} key = {stateNumber}/>}/> */
<CounterPage people ={starWarsPeople} key = {stateNumber}/*I want this to re-render every time the inverval changes *//>
:
<div>loading...</div>
}
/>
</Switch>
</div>
</Router>
)
}
}
export default ExampleApp;
class PeoplePage extends React.Component {
constructor(props){
super(props)
this.state ={
number:0
}
}
componentDidMount(){
this.myInterval = setInterval(()=>{
this.setState({state:this.state+1})
this.props.increment(1);
},1000)
}
componentWillUnmount(){
clearInterval(this.myInterval);
}
render(){
return(
<div>
{this.props.prop1.results[0].name}
</div>
)
}
}
const CounterPage =({count})=>{
return(
<div>{count}</div>
)
}
我不完全确定您的应用程序代码应该做什么,但是当我将您的代码片段复制/粘贴到代码沙箱中时,在代码运行之前我必须解决一些问题。
问题
Route
的render
道具没有返回渲染 function。Route
的path
道具都不是绝对路径。PeoplePage
的 state 更新错误地更新了其 state。 不访问正确的以前的 state,即 state 不是数字,所以this.state + 1
不起作用。CounterPage
只消耗和渲染一个count
道具,但没有传递这个道具。修复
路线
<Route
path="/people" // <-- fix path
exact
render={(routeProps) => // <-- use a render function to return UI
starWarsPeople.length !== 0 ? (
<PeoplePage
prop1={starWarsPeople}
increment={this.numberHandler.bind(this)}
{...routeProps} // <-- pass on route props
/>
) : (
<div>loading...</div>
)
}
/>
<Route
path="/counter" // <-- fix path
exact
render ={(routeProps) => // <-- use a render function to return UI
starWarsPeople.length !== 0 ? (
<CounterPage
people={starWarsPeople}
count={stateNumber} // <-- pass count prop
key={stateNumber}
{...routeProps} // <-- pass on route props
/>
) : (
<div>loading...</div>
)
}
/>
人物页面
class PeoplePage extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 0
};
}
componentDidMount() {
this.myInterval = setInterval(() => {
this.setState(({ number }) => ({ number: number + 1 }));
this.props.increment(1);
}, 1000);
}
componentWillUnmount() {
clearInterval(this.myInterval);
}
render() {
return <div>{this.props.prop1.results[0].name}</div>;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.