代码之家 › 专栏 › 技术社区 › Mizlul

如何在React中跨组件存储变量状态

react-router-v4 react-router reactjs javascript

Mizlul · 技术社区 · 8 年前

我目前有三个不同的组件,如A、B、C,我需要通过B将信息从A传递到C。我可以通过,但当我按下后退按钮时出现问题值丢失,我也会得到一些未定义的错误:

这是我从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});
    }

在组件B中的组件didump,我有: console.log(this.props.location.state) //打印出行业和工作

当我从这个组件B转到C,然后单击后退按钮,然后 此.props.location.state 没有任何值,所以基本上我从goint到一个组件再到另一个组件都丢失了值。

实现这一点的最佳方法是什么?即使回到组件中,我仍然可以保留值

1 回复 | 直到 8 年前

Globuous 8 年前

编辑:工作示例: https://codesandbox.io/s/l50l0zxn6q

我将把所有内容包装在一个根组件中,并且只在URL之间更改这个根组件的子组件。

当你点击后退按钮时,这个.prop s.location.state显然是空的,因为你没有通过任何道具。

解决这一问题的一种方法是使用一个根组件来保持页面间的某些状态。如果你想的话,也可以使用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之间有一个持久的状态,如果需要,每个页面组件都可以访问和修改。

如果我犯了错误,请告诉我,我已经尝试过代码,并且行为是当单击链接时状态会改变,而不是在浏览器的后退按钮上。另外,如果有什么事情很难理解,或者我完全误解了你的要求,请告诉我;)

干杯,祝你好运!

编辑:将代码转换为响应路由器;应按预期工作