[英]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.results
与this.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.