Question

拥有一个Search组件，当有效负载返回时，会重定向到Results组件。希望结果组件使用React Router v4 Redirect显示已通过的搜索状态。我在Docs中的假设是使用state: { referrer: currentLocation }可以传递一个对象。

搜索

export default class Search extends Component{
  constructor(props){
    super(props);
      this.state = {
        searchValue: '',
        results:[]
      }
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress = (e) => {
    let searchParam = e.target.value;
    if (e.key === 'Enter'){
      axios
        .get(URL+searchParam)
        .then((response) => {
          this.setState({results: response.data});
        });
    }
  };

  render(){
    return(
      <div>
        <input
          ref="search"
          type="text"
          placeholder="Search"
          onKeyPress={this.handleKeyPress.bind(this)}
        />
        {this.state.results.length > 0 &&
          <Redirect to={{
            pathname: '/results',
            state: { results: this.state.results }
          }} />
        }
      </div>
    );
  }
}

结果

export default class Results extends Component{
  constructor(props){
    super(props);
    this.state = {
      results:[] // <<<<<< Not sure if this needs set
    }
  } 
  render(){
    console.log('SEARCH RESULTS STATE', this.state); // <<<< this either returns undefined or just an empty array depending if initial state is set
    return(
      <div>
        <h1>Search Results</h1>
      </div>
    );
  }
}

除非我没有正确地阅读此内容，否则问题似乎是当重定向发生时，没有任何内容传递到Results组件中。

如果输入了值并且成功则重定向发生搜索状态返回Object {searchValue: "", results: Array(1)}但是，搜索结果状态会返回Object {results: Array(0)}或undefined，具体取决于初始状态设置。

还在结果上尝试了不同的组件生命周期，但无法以这种方式获取任何传递的数据。我的想法可能是componentWillRecieveProps(nextProps, nextState){}可能能够获得一些传递的数据，并且可以通过这些方式设置状态。

Answer 1

在您的主类组件的render（）方法的开头，您必须编写代码，例如：

if (isLoggedIn){
    return <Redirect to={{
      pathname: '/anyPath',
      state: { stateName: this.state.anyState}
    }} />;
}

并且在与路由/anyPath关联的组件中，您必须提取调用this.props.location.state.stateName的传递状态。在您的确切情况下，您应该在结果类中调用this.props.location.state.results。您可以从Results类中删除构造函数方法。

isLoggedIn可能是另一个状态，您可以在主要组件的构造函数Method中首先设置为false。如果您的用户点击按钮，则isLoggedIn可以设置为true，这样您就可以将应用重定向到另一个具有首选状态的路线。

Answer 2

看起来对象已经过了，但它嵌套在location.state中并且看起来不够深。

React Router v4 Redirect将状态从搜索传递到结果

2 个答案: