时间戳

首页 > 解决方案 > 如何从组件 B 更新组件 A 中的状态？

javascript - 如何从组件 B 更新组件 A 中的状态？

问题描述

下面的代码是我们主页中存在的一些代码，它有一个名为：cityCountry的状态变量，我尝试将其解析为组件 EuropeMap，以便我可以从 EuropeMap 组件更新 Home 组件中的 cityCountry。 

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 中的方法，它必须最终更新 Home 中的 cityCountry 状态，以触发 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 中的状态？

谢谢 ：）

标签： javascriptreactjsstatejsx

解决方案

Home在您的组件中创建一个函数来更新状态变量并将其作为道具cityCountry转发给组件：EuropeMap

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

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

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

推荐阅读