Question

我正在制作一个会向用户生成晚餐建议的应用。我成功获取了数据并将其输出。但是我非常讨厌过滤器。

我对这项任务的想法是创建一个过滤器，用户可以选择一种美食，然后获得晚餐建议。我正在使用Zomato API来获取结果数据。我需要通过

我不知道如何将Cuisine_id从我的CusisineOption组件传递到我的FoodGuide组件。我需要将{_1}}组件中的Cuisine_id（也从Zomato获得ID）传递给CusisineOption组件。然后使用Cuisine_id获取JSON文件。

如果有人可以帮助并给我一些建议，我将不胜感激。这是我的代码：

CusisineOption组件：

FoodGuide

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;组件：值是我想使用Cuisine_id更新的值

FoodGuide

}

导出默认的FoodGuide；

Answer 1

尝试类似的方法（我确实删除了一些样板，但是您可以知道要去哪里）：

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
  }
}

Answer 2

在可能的情况下，我强烈建议使用状态管理库，例如redux。请检查redux，redux react和redux-thunk / redux-saga，以寻求更好的方法。

如何将状态从有状态的组件传递到另一个有状态的组件

2 个答案: