我想在页面上显示搜索结果。我的想法是进行提交以将请求发送到服务器。接收到数据后,我将对其进行迭代,并调用一个函数在另一个组件中对其进行处理,该组件应将已处理的数据呈现回父组件。不幸的是,没有在搜索组件中呈现任何数据,也没有给出调试错误。
当前的主要问题是SearchResults没有返回任何数据;也不确定在该组件中是否接收到数据。
import React, { Component } from "react";
import axios from "axios";
import SearchResults from "./SearchResults";
export default class SearchComponent extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
query: "",
searchresults: []
};
}
submitSearchResults(searchresults) {
return this.state.searchresults.map(function(object, i) {
return <SearchResults obj={object} key={i} />;
});
}
onSubmit(e) {
e.preventDefault();
axios
.get("http://localhost:4200/serverport/spotify/" + this.state.song)
.then(res => {
const searchresults = res.data;
for (var key in searchresults) {
if (searchresults.hasOwnProperty(key)) {
for (var i = 0; i < searchresults[key].items.length; i++) {
this.submitSearchResults(searchresults[key].items[i]);
}
}
}
});
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input
type="text"
value={this.state.query}
onChange={this.onChangeSong}
/>
<input value="search" type="submit" />
</form>
<div>{this.submitSearchResults()}</div>
</div>
);
}
}
这是从服务器请求数据的代码。我删除了一些无关的代码以使其更具可读性。
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
class SearchResults extends Component {
constructor(props) {
super(props);
}
render() {
return <div>works</div>;
}
}
export default SearchResults;
这是应该在其中处理数据的文件。我只渲染“作品”以进行调试。
答案 0 :(得分:1)
您可以将searchresults
设置为状态,然后组件将自动重新呈现,而不是调用在请求完成后呈现搜索结果JSX的函数。
示例
const axios = {
get: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve({ data: [{ text: "foo" }, { text: "bar" }] });
}, 1000);
});
}
};
class SearchComponent extends React.Component {
state = {
song: "",
searchresults: []
};
submitSearchResults(searchresults) {
return this.state.searchresults.map(function(object, i) {
return <SearchResults obj={object} key={i} />;
});
}
onSubmit = e => {
e.preventDefault();
axios
.get("http://localhost:4200/serverport/spotify/" + this.state.song)
.then(res => {
const searchresults = res.data;
this.setState({ searchresults });
});
};
onChangeSong = e => {
this.setState({ song: e.target.value });
};
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input
type="text"
value={this.state.song}
onChange={this.onChangeSong}
/>
<input value="search" type="submit" />
</form>
<div>{this.submitSearchResults()}</div>
</div>
);
}
}
class SearchResults extends React.Component {
render() {
return <div>{this.props.obj.text}</div>;
}
}
ReactDOM.render(<SearchComponent />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>