将数据传递给Parent但滞后

Question

我正在使用状态为Semantic-ui-react dropdown的组件。实际上，每个下拉单击选项都相应地更新状态（单击'Biomasa'日志1，然后单击'Eólica'日志2，依此类推）。 好的。

然后，我想将传递该数据传递给Parent。我决定通过将下拉组件放在另一个组件中来实现。幸运的是，我将能够呈现不同的Google地图标记（根据所选的下拉选项）。

问题：传递的数据滞后（正如您在日志中看到的），为什么会这样？沙箱here。

import React from "react";
import ReactDOM from "react-dom";
import { Dropdown } from "semantic-ui-react";
import { Marker } from "react-gmaps";

const sen_data3 = [
  {
    text: "Biomasa",
    value: 1,
    key: "biomasa"
  },
  {
    text: "Eólica",
    value: 2,
    key: "eolica"
  },
  {
    text: "Geotérmica",
    value: 3,
    key: "geotermica"
  },
  {
    text: " Hidroeléctrica",
    value: 4,
    key: "hidroelectrica"
  },
  {
    text: "Residuo Sólido",
    value: 5,
    key: "residuo"
  },
  {
    text: "Solar",
    value: 6,
    key: "solar"
  },
  {
    text: "Térmica",
    value: 7,
    key: "térmica"
  }
];

class TheMapDropdown32Markers extends React.Component {
  receiveChild = valueData => {
    console.log("valueData passed to Parent", valueData);
  };

  render() {
    console.log("valueData passed to parent", this.receiveChild());
    return (
      <div>
        <div>Hey, filter</div>
        <TheMapDropdown32 onChange2={this.receiveChild} />
      </div>
    );
  }
}

class TheMapDropdown32 extends React.Component {
  state = {
    valueData: undefined
  };

  handleChange = (evt, { value }) => {
    this.setState({ valueData: value });
    this.props.onChange2(this.state.valueData);
  };

  render() {
    console.log("this.state.valueData Child", this.state.valueData);
    return (
      <Dropdown
        placeholder={"Seleccione Categoría"}
        options={sen_data3}
        selection
        value={this.state.valueData}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<TheMapDropdown32Markers />, document.getElementById("gmaps"));