Изменение состояния родителя в действии Не вызывает ли повторный рендеринг детей?

Question

У меня есть реактивный компонент ARC GIS, который расширяет базовый "родительский" компонент:

import React, { Component } from "react"
import "./AOPMap.css"
import { Map } from 'react-arcgis';
import BoundaryLayers from '../BoundaryLayers/BoundaryLayers'
import AOPComponent from '../AOPComponent/AOPComponent'

class AOPMap extends AOPComponent {
  constructor(props) {
    super(props);

    this.handleMapLoad = this.handleMapLoad.bind(this)
  }

  render() {
      alert ('Reached render');
      return (
        <Map onLoad={this.handleMapLoad} >
          <BoundaryLayers boundaryType={this.state.boundaryType} map={this.state.map} />
        </Map>
      );
  }

  handleMapLoad(map, view) {
      this.setState({ map, view });
  }

}

export default AOPMap;

Также расширяет этот базовый родительский компонент, эта форма:

import React, { Component } from "react"
import "./AOPForm.css"
import { Map } from 'react-arcgis';
import BoundaryLayers from '../BoundaryLayers/BoundaryLayers'
import AOPComponent from '../AOPComponent/AOPComponent'

class AOPForm extends AOPComponent {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        console.log("Event Value: " + event.target.value);
        this.setState({boundaryType: event.target.value});
        alert('Boundary Type submitted as: ' + this.state.boundaryType);
      }

      handleSubmit(event) {
        // NOTE: Now - it will typically report back as what you changed it to - doesn't seem to pick it up on Change right away?
        alert('Boundary Type submitted as: ' + this.state.boundaryType);
        event.preventDefault();
      }

      render() {
          alert ('Reached render');
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick a Boundary Type:
              <select value={this.state.boundaryType} onChange={this.handleChange}>
                <option value="point">Point</option>
                <option value="tile">Tile</option>
                <option value="flightline">Flightline</option>
              </select>
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
}

export default AOPForm;

Итак, изменив раскрывающийся список прямо сейчас, я могу видеть с помощью некоторых основных предупреждений, что состояние не меняется сразу, и я вспоминаю, что где-то читал, что React не гарантирует, что это будет то, что вы можете увидеть сразу же. Тем не менее, реальная проблема заключается в том, что когда я меняю состояние, я вижу, что он повторно отображает форму (из-за предупреждения "Reached render") - но, похоже, он не обновляет карту, которая также использует это this.state..boundaryType.

Изменяемое состояние определяется в родительском компоненте, определенном в конструкторе для этого:

import React, { Component } from "react"
import "./AOPComponent.css"
import { Map } from 'react-arcgis';
import BoundaryLayers from '../BoundaryLayers/BoundaryLayers'

class AOPComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
        map: {basemap: 'satellite'},
        view: null,
        loadedKmlLayers: [],
        boundaryType: 'point'
    };

    this.handleComponentLoad = this.handleMapLoad.bind(this)
  }

  handleMapLoad(map, view) {
      this.setState({ map, view });
  }

}

export default AOPComponent;

Поэтому я думаю, что если он будет перерисовываться всякий раз, когда изменяется состояние, то почему при изменении состояния родителя перерисовывается только форма, а не карта? Как правильно запустить повторную визуализацию карты, когда пользователь готов отправить форму (будет несколько полей - больше, чем только это), поэтому повторная визуализация карты при изменении может быть немного - в идеале нужно только запустить повторную визуализацию карты при отправке, поэтому у меня она есть в качестве заполнителя).

Наконец, хотя код, вероятно, не важен, мы визуализируем их с помощью "Layout.js", который просто возвращает div и т. Д., Содержащие такие вещи, как Map и т. Д.