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

我现在有三个不同的组件，比如A、B、C，我需要通过B将信息从A传递到C。 我能够通过考试，但当我按下“后退”按钮时遇到问题。数值丢失，我还遇到一些未定义的错误：

这就是我从cmp A传递到cmp B的方式（组件A的外观）：

this.state={
选定的行业：“”，
所选作业：“”
}
申请
onIndustryChangeOption（事件）{
this.setState（{selectedIndustry:event.target.value}）；
}
onJobChangeOption（事件）{
this.setState（{selectedJob:event.target.value}）；
}

在组件D的组件B中，我有：

console.log（this.props.location.state）

//打印行业和作业

问题是当我从这个组件B转到C，然后单击“上一步”按钮，然后这个.props.location.state没有任何值，所以基本上我从一个组件到另一个组件丢失了值

实现这样的目标的最佳方法是什么，即使我返回到组件时仍然可以保留值

编辑：工作示例：

我会将所有内容包装在一个根组件中，并且只在URL中更改这个根组件的子组件

当你点击后退按钮时，这个.props.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")
);

从“React”导入React
从“react dom”导入react dom
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}
//链接不允许重写onClick，因为它由react路由器在内部使用
//在链接中添加div，并将onClick prop添加到div
常数A=props=>(
props.setRootState（{test:'foo'}）}>
转到/B
{JSON.stringify（props.rootState）}
)
常数B=props=>(
props.setRootState（{test:'bar'}）}>
转到/A
{JSON.stringify（props.rootState）}
)
类根扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
测试：“”，
}
}
render（）{
const DefaultComp=（）=>转到
//别忘了将此绑定到setState
常数PageA=（）=>
常数PageB=（）=>
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

就像这样，在URL之间有一个持久状态，每个页面组件都可以在需要时访问和修改

请让我知道，如果我犯了错误，我已经尝试了代码，行为是当点击链接时，状态将改变，而不是点击浏览器的后退按钮。如果有什么难以理解的地方，或者我完全误解了你的要求，也请告诉我；）

干杯，祝你好运

---

编辑：将代码转换为反应路由器；应该按预期工作

很抱歉回答得太晚，是的，这实际上解决了我的问题，不知何故，这就像使用redux一样，通过在根组件上存储所有内容来维护子组件的状态，但redux是不可变的，而这是可重复的！这和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")
);