Question

所以我正在开发一个React应用，而我在问题上停留了大约两天。我正在建立一个从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>

Answer 1

在componentDidUpdate中，您将prevState.results与this.state.results进行比较，但是在获取数据时，您将调用状态变量info。尝试将info中的results重命名为submit。

Answer 2

您必须声明路线，否则 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;

Answer 3

您没有将任何道具传递到“结果”页面。该页面将显示什么？您是要在“结果”页面上显示从Api调用中获得的数据吗？

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

3 个答案: