Как передать состояние из компонента с состоянием в другой компонент с состоянием

Question

Я создаю приложение, которое будет генерировать предложение ужина для пользователей.Я успешно извлекать данные и выводить их.Но я очень застрял с фильтром.

Моя идея этого задания - создать Фильтр, чтобы пользователи могли выбирать кухню, а затем получать предложение на ужин.Я использую API Zomato для получения данных resutuanrt.Мне нужно передать

. Я понятия не имею, как передать kitchen_id из моего CusisineOption компонента в мой FoodGuide компонент.Мне нужно передать kitchen_id из моего CusisineOption компонента (я также получаю идентификатор от Zomato) в мой FoodGuide компонент.А затем используйте kitchen_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 компонент: значение - это значение, которое я хочу обновить с помощью kitchen_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;

Answer 1

Насколько это возможно, я настоятельно рекомендую библиотеки управления состояниями, такие как redux. Пожалуйста, проверьте на redux, redux реагировать и redux-thunk / redux-saga для лучшего подхода.

Answer 2

Попробуйте что-то вроде этого (я удалил шаблон, но у вас есть идея, куда идти):

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