[英]React passing fetched data to another component
海兰!
我的反应代码有问题。 我的任务是从iTunes API调用,该操作由fetch完成,然后处理数据。 但是我无法将其另存为变量,以便以后可以传递。
import React, { Component } from 'react';
class SearchField extends Component{
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (event) => {
this.setState({value: event.target.value});
}
handleSubmit = (event) => {
event.preventDefault();
fetch(`https://itunes.apple.com/search?media=music&term=${this.state.value.toLowerCase()}`)
.then((resp) => resp.json())
.then(searchRes => searchRes.results[0].artistName)
.catch(err => console.log(err));
}
render() {
return(
<section className="hero is-primary">
<div className="hero-body">
<div className="container">
<form onSubmit={this.handleSubmit}>
<input className="input is-primary" type="text" value={this.state.value} onChange={this.handleChange} placeholder="Search for artist" />
<input className="button is-info" type="submit" value="Search" />
</form>
</div>
</div>
</section>
)
}
}
export default SearchField;
以后我必须使用获取的数据,我只需要首先使用艺术家的名字。 如果我记录了值(searchRes.results [0] .artistName,我得到了正确的值,但是如果我想保存它供以后使用,我只会得到空的console.log。我尝试了几种方法,但从未获得我的结果回来了。
请帮帮我。
请记住,React中的数据流是单向的 。 如果您想在应用程序周围共享数据,则搜索组件不应是获取数据的组件。 那应该留给父组件(也许是App)。 该组件应具有处理提取请求的功能,然后您可以将对该功能的引用向下传递给搜索组件,以在单击按钮时进行调用。 然后,一旦加载了该数据,父(App)组件便可以将所有相关数据向下传递给子组件。
这是一个基于您现有代码的快速模型:
class Search extends {
constructor(props) {
super(props);
this.state = { url: '' };
this.handleKey = this.handleKey.bind(this);
}
handleKey(e) {
const url = e.target.value;
this.setState({ url });
}
render() {
const { url } = this.state;
// grab the function passed down from App
const { fetchData } = this.props;
return (
<input onKeyUp={this.handleKey} value={url} />
// Call that function with the url when the button is clicked
<button onClick={() => fetchData(url)}>Click</button>
)
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
this.fetchData = this.fetchData.bind(this);
}
// App contains the fetch method
fetchData(url) {
fetch(url)
.then(res => res.json())
// Update the App state with the new data
.then(data => this.setState({ data });
}
render() {
const { data } = this.state;
// Sanity check - if the state is still empty of data, present
// a loading icon or something
if (!data.length) return <Spinner />
// otherwise return the rest of the app components
// passing in the fetch method as a prop for the search component
return (
<OtherComponent data={data} />
<Search fetchData={this.fetchData} />
)
}
}
请说明您的意思
但是如果我想保存它供以后使用,我只会得到空的console.log
我认为,解决问题的正确方法是将回调函数传递给组件的props,每当您按下search并找到搜索结果时,该函数就会被调用,例如: https : //codesandbox.io/s/xpq171n1vz
编辑:请注意,虽然此答案已被接受并且是解决您的问题的一种方法,但是Andy的答案包含有关如何实际构建组件的扎实而详尽的建议。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.