我目前有三个不同的组件,如A,B,C,我需要将信息从A传递给C到B. 我能够通过,但是当我按下后退按钮时我遇到问题,值也会丢失,我也会得到一些未定义的错误:
这就是我从cmp A传递到cmp B的方式(组件A的外观如何):
this.state = {
selectedIndustry: '',
selectedJob: ''
}
<Link to={{
pathname: '/information-job',
state: {industry: this.state.selectedIndustry, job: this.state.selectedJob}
}}>
<Button className={"primaryBtn"}>
Apply
</Button>
</Link>
onIndustryChangeOption(event) {
this.setState({selectedIndustry: event.target.value});
}
onJobChangeOption(event) {
this.setState({selectedJob: event.target.value});
}
在componentDidMound的组件B中,我有:
console.log(this.props.location.state)
//打印出行业和工作
事情就是当我从这个组件B转到C然后单击后退按钮,然后 this.props.location.state 没有任何值,所以基本上我从goint中丢失了值一个组件到另一个组件。
实现这一目标的最佳途径是,即使我回到组件
,我仍然可以保留值答案 0 :(得分:0)
编辑:工作示例:https://codesandbox.io/s/l50l0zxn6q
我会将所有内容都包装在Root组件中,并且只在URL中更改此Root组件的子项。
当你点击你的后退按钮时,这个.props.location.state显然是空的,因为你没有用你的道具传递任何东西。
解决此问题的一种方法是使Root组件在页面之间保持某种状态。如果你愿意,也可以使用Redux。
所以你想要的是这样的:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"
// Link does not allow overriding onClick as it is used internally by react-router
// add div inside Link and add onClick prop to div
const A = props => (
<div>
<Link to='/B'>
<div onClick={() => props.setRootState({ test: 'foo' })}>
Go to /B
</div>
</Link>
{JSON.stringify(props.rootState)}
</div>
)
const B = props => (
<div>
<Link to='/A'>
<div onClick={ () => props.setRootState({ test: 'bar' }) }>
Go to /A
</div>
</Link>
{JSON.stringify(props.rootState)}
</div>
)
class Root extends React.Component {
constructor(props) {
super(props)
this.state = {
test: '',
}
}
render() {
const DefaultComp = () => <Link to="/A">go to A</Link>
// don't forget to bind this to setState
const PageA = () => <A rootState={this.state}
setRootState={this.setState.bind(this)} />
const PageB = () => <B rootState={this.state}
setRootState={this.setState.bind(this)} />
return (
<Switch>
<Route exact path="/" component={ DefaultComp } />
<Route path="/A" component={ PageA } />
<Route path="/B" component={ PageB } />
</Switch>
)
}
}
ReactDOM.render(
<Router>
<Root />
</Router>,
document.getElementById("root")
);
就像你在URL中拥有持久状态一样,每个页面组件都可以根据需要进行访问和修改。
如果我犯了错误,请告诉我,我已尝试过代码,行为是点击链接时状态会改变,而不是浏览器的后退按钮。如果有什么东西难以理解或者我完全误解了你的要求,请告诉我;)
干杯,祝你好运!
编辑:将代码转换为react-router;应该按预期工作