繁体   English   中英

如何在提交搜索时重定向到另一个组件?

[英]How to redirect to another component onsubmit Search?

所以我正在开发一个反应应用程序,我已经被困在一个问题上两天了。 我正在构建一个从 TMDB 获取数据的搜索,一切正常。 当我输入输入时,所有数据都会流入! 但是,当我提交并尝试重定向到 /results 页面时,该页面链接到一个组件,该组件在定向到时显示搜索结果,但它重定向到结果页面,我无法显示搜索结果。 这是我的代码。

import React, { Component, Redirect } from "react";
import axios from "axios";
import { withRouter } from "react-router";

    constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: ""
    };

    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidUpdate(prevProps, prevState) {
    const { history } = this.props;
    if (prevState.results !== this.state.results) {
      history.push("/results");
    }
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
    console.log(this.state);
  }

  submit(e) {
    e.preventDefault();
    const term = e.target.elements.term.value;
    let url = `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-US&query=${term}&page=1`;
    axios
      .get(url)
      .then(({ data }) => {
        // const info = response.data.results;
        console.log(data);
        this.setState({
          results: data
        });
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <input
            onChange={this.handleChange}
            type="text"
            name="term"
            value={this.state.term}
          />
          <button type="submit" bsStyle="primary">
            Find
          </button>
        </form>
      </div>
    );
  }
}

export default withRouter(Find);

Result.js

<div className="search-poster-container">
     {this.props.results.map(result => { // This error show how to reolve this
     <p>{result.name}</p>
    })} 
    <h1>Hello Result will fetch here</h1>

  </div>

componentDidUpdate您将prevState.resultsthis.state.results进行比较,但是当您获取数据时,您正在调用状态变量info 尝试将info重命名为submit results

您必须声明路线,否则history.push将不起作用

并尝试使用react-router-dom代替

这是我的示例代码

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Result from "./result";

class App extends Component {

  render() {
    return (
      <Router>
        <div id="container">
          <Switch>
            <Route exact path="/result" component={Result} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

您没有将任何道具传递给“结果”页面。 那个页面会显示什么? 您的意思是在“结果”页面上显示从 Api 调用中获得的数据吗?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM