Question

我目前有三个不同的组件，如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中丢失了值一个组件到另一个组件。

实现这一目标的最佳途径是，即使我回到组件

，我仍然可以保留值

Answer 1

编辑：工作示例：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;应该按预期工作

如何在React

1 个答案: