![](/img/trans.png)
[英]How can I pass attributes from a stateful component to an event handler used in an HOC wrapping a child component?
[英]How to pass state from a stateful component to another stateful component
我正在制作一个会向用户生成晚餐建议的应用。 我成功获取了数据并将其输出。 但是我非常喜欢过滤器。
我的任务是创建一个过滤器,用户可以选择一种美食,然后获得晚餐建议。 我正在使用Zomato API来获取结果数据。 我需要通过
我不知道如何将Cuisine_id从我的CusisineOption
组件传递到FoodGuide
组件。 我需要将CusisineOption
组件中的Cuisine_id(也从Zomato获得ID)传递给FoodGuide
组件。 然后使用Cuisine_id获取JSON文件。
如果有人可以帮助我并给我一些建议,我将不胜感激。 这是我的代码:
CusisineOption组件:
import React, { Component } from 'react';
import axios from 'axios';
import Aux from '../../hoc/Aux/Aux';
class Cuisines extends Component {
state = {
error: false,
optionList: [],
value: null
}
componentDidMount() {
const config = { headers: {'user-key': 'myAPIkey'} };s
axios.get(`https://developers.zomato.com/api/v2.1/cuisines?city_id=2891` , config)
.then(res => {
this.setState({optionList: res.data.cuisines})
console.log(this.state.optionList)
})
.catch(error => {
this.setState({error: true})
})
}
gotOption = (event) => {
this.setState({value: event.target.value})
console.log(this.state.value)
}
render() {
const CuisinesCopy = [...this.state.optionList]
const cuisineItems = CuisinesCopy.map((item) => {
return(
<option key={item.cuisine.cuisine_id.toString()} value={ item.cuisine.cuisine_id }>{item.cuisine.cuisine_name}</option>
)
})
return (
<Aux>
<p>Goddamnit! I am going to get the json data</p>
<select value={this.state.value} onChange={this.gotOption}>
<option value="1">--Please select a cusion--</option>
<option value="2">--Please select a cusion 2--</option>
{ cuisineItems }
</select>
</Aux>
)
}
}
export default Cuisines;
FoodGuide
组件:值是我想使用Cuisine_id更新的值
class FoodGuide extends Component {
state = {
names: [],
suggestion: null,
getList: false,
loading: false,
error: false,
changed: false,
value: "2",
list: []
}
componentDidMount() {
const config = { headers: {'user-key': 'APIKEY'} };
axios.get(`/search?entity_id=2891&entity_type=city&count=50&sort=rating$&cuisines=${this.props.value}` , config)
.then(res => {
this.setState({names: res.data.restaurants})
console.log(this.state.names)
})
.catch(error => {
this.setState({error: true})
})
}
getSuggestion = () => {
let rSuggestion;
if(this.state.names) {
let randomR = this.state.names[Math.floor(Math.random()*this.state.names.length)];
rSuggestion = randomR.restaurant.name
//console.log(randomR.restaurant.name)
this.setState({suggestion: rSuggestion})
}
return rSuggestion
}
getRestaurantList = () => {
let rData = <p>This is a suggestion</p>
if(this.state.getList) {
rData = this.state.names.map((r, i) => {
return(
<li key={i}>
<span>Name: { r.restaurant.name }</span>
</li>
)
})
}
return rData
}
getRestaurantsHandler = () => {
let rList = <p>Loading...</p>
if(this.state.names) {
this.setState({getList: true})
}
return rList
}
render () {
return (
<Aux>
<h2>Food Guide</h2>
<Cuisines />
<Suggestion suggested={ this.getSuggestion } suggestion={this.state.suggestion}/>
<RestaurantList getList={ this.getRestaurantsHandler } rList={ this.getRestaurantList() }/>
</Aux>
)
}
}
导出默认的FoodGuide;
尝试这样的事情(我确实删除了一些样板,但是您可以知道要去哪里):
class CuisineOption extends PureComponent {
clicked = () => {
this.props.onCuisineClick(this.props.id); // Call with cuisine id
};
render() {
const { id, cuisine_name } = this.props;
return (
<option key={option.id} onClick={this.clicked}>
{cuisine_name}
</option>
);
}
}
class Cuisines extends Component {
state = {
options: [],
};
componentDidMount() {
axios
.get('/cuisines')
.then((result) => this.setState({ options: result.data.cuisines }));
}
render() {
const { options } = this.state;
return (
<div>
{options.map((option) => (
<CuisineOption
key={option.id}
{...option}
onCuisineClick={this.props.onCuisineClick} // Pass callback to each cuisine option
/>
))}
</div>
);
}
}
class FoodGuide extends Component {
state = {
cuisineId: 0, // initial cuisine id
names: [],
};
componendDidMount() {
this.search(); // Initial searching
}
componendDidUpdate(prevProps, prevState) {
if (prevState.cuisineId !== this.state.cuisineId) {
this.search(); // Trigger search with new cuisine id
}
}
search() {
axios
.get(`/search?cuisine${this.state.cuisineId}`)
.then((result) => this.setState({ names: result.data.names }));
}
cuisineChanged = (id) => this.setState({ cuisineId: id }); // Callback called with new cuisine id
render() {
return <Cuisines onCuisineClick={this.cuisineChanged} />; // Pass callback to Cuisines component
}
}
在可能的情况下,我强烈建议使用状态管理库,例如redux。请检查redux,redux react和redux-thunk / redux-saga,以寻求更好的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.