Как я могу обновить состояние в компоненте A из компонента B?

Question

Ниже приведен код, который существует на нашей домашней странице и содержит переменную состояния: cityCountry , , которую я пытаюсь проанализировать для компонента EuropeMap, чтобы я мог обновить Компонент cityCountry в компоненте Home из компонента EuropeMap.

import React, { Component } from "react";
import EuropeMap from "../components/EuropeMap";
//Styling
import "../css/index.css";
import "../css/grid.css";
import "../css/normalize.css";
//Components
import Footer from "../components/Footer";
import Search from "../components/SearchByCity";
import FetchClass from "../components/FetchClass";
import WeatherBox from "../components/WeatherBox";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      weatherBoxId: "",
      weatherBox: false,
      city: this.props.city,
      cityCountry: [],
      weather: [
        {
          id: "",
          applicable_date: "",
          min_temp: "",
          max_temp: "",
          the_temp: "",
          wind_speed: "",
          weather_state_name: "",
          weather_state_abbr: "",
          wind_direction_compass: ""
        }
      ]
    };
  }



  render() {
    return (
      <div>
        <section className="section-map">
          <div className="row home-row">
            <div className="col span-2-of-3">
              <EuropeMap cityCountry={this.state.cityCountry} />
            </div>

            <div className="col span-1-of-3">
              //{this.showWeatherDetailed(this.state.weather)}
            </div>
            <div>
              <h2>Coming data</h2>
            </div>
          </div>
        </section>

Ниже приведен код методов EuropeMap, который должен завершить обновление состояния cityCountry в Home, чтобы вызвать метод Home render (), однако, похоже, он не работает.

import React, { Component } from "react";
import "../css/index.css";
import FetchClass from './FetchClass';

class EuropeMap extends Component {
  state = {
    previousCountryStyle: "",
    currentCountryCode: "",
  };

  handleCountryClick = evt => {
    var countryCode = evt.target.id;
    this.findWoeidForCountry(countryCode);
    //FetchClass.fetchCitiesForClickedCountry({...this.state.countryObject});
    console.log(countryCode);

    if (this.state.previousCountryStyle === "") {
      this.setState({ currentCountryCode: countryCode });
      evt.target.style.fill = "#f96e10";
    } else {
      this.setState({ currentCountryCode: countryCode });
      this.setPreviousCountryToGrey(this.state.previousCountryStyle);
      evt.target.style.fill = "#f96e10";
    }
    this.setState({ previousCountryStyle: evt.target.style });
  };
  setPreviousCountryToGrey = st => {
    st.fill = "#c0c0c0";
  };

  findWoeidForCountry = async countryCode => {

    const woeid = require("woeid");
    console.log(woeid.getWoeid(countryCode));
    if (countryCode !== "svg2") {
      const woeid2 = woeid.getWoeid(countryCode);
      const result = await FetchClass.fetchCitiesForClickedCountry(woeid2.woeid);
      this.setState({cityCountry: result})
      console.log("BYER: ", result);
      console.log(woeid2.woeid, 'Europe Map Find Woeid Method');
    }
  };

Может кто-нибудь сказать мне, как я могу проанализировать переменную состояния для другого компонента, чтобы я из компонента B мог обновить состояние в компоненте A?

Спасибо:)

Answer 1

создать метод в домашнем компоненте

updateCityCountry = val => this.setState({ cityCountry: val })

и вместо того, чтобы визуализировать компонент как

<EuropeMap cityCountry={this.state.cityCountry} />

, отобразить как

<EuropeMap cityCountry={this.state.cityCountry} updateCity={this.updateCityCountry} />

и на карте Европыкомпонент, который вы можете вызвать

this.props.updateCity(result)

, и он будет обновлен в домашнем компоненте

Answer 2

Создайте функцию в вашем Home компоненте, которая обновляет переменную состояния cityCountry и перенаправляет ее в EuropeMap компонент в виде реквизита:

// in `Home`
updateCountry = (cityCountry) => this.setState({ cityCountry });

<EuropeMap updateCountry={this.updateCountry} { ... } />

// in `EuropeMap`
onSomethingHappend = () => {
    var data = somehowGetData();
    this.props.updateCountry(data);
}