Question

我有一个ARC GIS反应组件，它扩展了一个基地＆＃34;父母＆＃34;成分：

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并不保证它会是你能看到的东西马上就是。然而，真正的问题是，当我改变状态时，我看到它重新渲染表单（由于警报＆＃34;到达渲染＆＃34;） - 但它似乎不会刷新地图谁也使用 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;

所以我的想法是，如果状态发生变化，它会重新渲染，为什么当我们改变父级的状态时，只有Form重新渲染而不是Map？当用户准备好提交表单时，触发重新渲染Map的正确方法是什么（将有多个字段 - 不仅仅是这一个 - 所以重新渲染Map on Change可能有点多 - 理想情况下，只想在提交时触发重新渲染Map，从而为什么我将其作为占位符）。

最后，尽管代码可能并不重要，但我们使用＆＃34; Layout.js＆＃34;它只是返回div等，包含像Map这样的东西等。

在React中改变父状态不会触发重新渲染子项？

0 个答案: