reactjs - 请求数据,将其传递给另一个组件并在反应中返回
问题描述
我想在页面上显示搜索结果。我的想法是提交一个向服务器发送请求的提交。接收到数据后,我遍历它并调用一个函数在另一个组件中处理它,该组件应该将处理后的数据呈现回父组件。不幸的是,搜索组件中没有呈现数据,也没有给出错误进行调试。
现在的主要问题是 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;
这是应该处理数据的文件。我只渲染“作品”以进行调试。
解决方案
当请求完成时,您可以在状态中设置 ,而不是调用呈现搜索结果 JSX 的函数,searchresults
组件将自动重新呈现。
例子
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>
推荐阅读
- azure - 为什么设置后 Kudu 节点版本不更新?
- python - 在 PyTorch 中加载迁移学习模型进行推理的正确方法是什么?
- javascript - 如何循环遍历角度/离子中的嵌套数组
- arrays - 如何在 IF-THEN 语句或 PROC SQL 语句中读取一列数据,SAS
- c# - 在 WPF 中以编程方式在 ListViewItem 上创建单击事件
- node.js - 无法在nodejs中使用mongoose删除mongodb中的文档
- typescript - 具有内联联合属性的 GQL 类型
- javascript - CSS 类可以手动应用,但 JavaScript 不这样做(真是奇怪的问题)
- php - PHP 警告:无法加载动态库 php_pdo_sqlite.dll 和 php_sqlite3.dll
- vue-storefront - “请指出 vue-storefront 提供的图像代理”