reactjs - レンダリング時に Reactjs の状態が 2 回変化する

Question

私は Reacts の状態について頭を悩ませようとしていますが、これが予想される動作であるかどうか疑問に思っています。

フォームがあり、フォーム送信時に関数をトリガーします。この関数は住所を取得し、それを緯度と経度に変換し、マップのマーカー位置を取得する json フェッチ呼び出しに吐き出します。

私が気づいたのは、フォーム送信のレンダリングでマーカーをconsole.logに記録すると、最初に古いオブジェクトがログに記録され、次に取得した新しいオブジェクトがログに記録され、フォーム送信を行うたびにこれが行われます。これは正常ですか？関数内で console.log を実行すると、古い状態しか取得できません。

これは私のコードです: http://pastiebin.com/embed/5a8da508b22c8

更新: ペーストビンではなくサイトにコードを追加:

import React from "react";
import MapsJson from './MapsJson';

class Maps extends React.Component {

    constructor(props) {
       super(props);
        this.state  = {
            lat: '51.507351',
            lng: '-0.127758',
            month: '07',
            year: '2017',
        };
        this.submitHandler = this.submitHandler.bind(this)
    }

    submitHandler(e) {

        e.preventDefault();
        if (e.target.place.value) {
            var removeError = document.getElementById("error");
            while (removeError.firstChild) {
                removeError.removeChild(removeError.firstChild);
            }
            let self = this;
            let geocoder = new window.google.maps.Geocoder();
            let getYear = e.target.year.value;
            let getMonth = e.target.month.value;
            geocoder.geocode( { 'address': e.target.place.value + ', UK'}, function(results, status) {
                if (status === 'OK') {
                    self.setState({
                        lat: results[0].geometry.location.lat(), 
                        lng: results[0].geometry.location.lng(), 
                        year: getYear,
                        month: getMonth                    },
                    function () {
                        self.getArea(this.state.lat, this.state.lng, this.state.year, this.state.month);                                            
                    })
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });
        } else {

            if (document.getElementById('error').innerHTML === 'A place is needed') {

            } else {
                document.getElementById('error').innerHTML += 'A place is needed';
                console.log('need a place');
            }
        }

     }



    changeHandler(e) {
        // console.log(`name and value: `, e.target.name, e.target.value)
        //console.log('triggered5')
    }

    componentWillMount() {
        this.setState({ markers: [] })
    }

    componentDidMount() {
        this.getArea(this.state.lat, this.state.lng, this.state.year, this.state.month)

    }


    getArea(lat, lng, year, month, nextProps) {
        const url = [
        // Length issue
            `https://data.police.uk/api/crimes-street/all-crime?lat=${lat}&lng=${lng}&date=${year}-${month}`
        ].join("")

        fetch(url)
          .then(res => res.json())
          .then(data => {
            this.setState({ markers: data });
        });    
    }


  render() {
    console.log(this.state.markers)
    return (
        <div>
            <div id="crimeCount"></div>
            <form onSubmit={this.submitHandler}>
                <input onChange={this.changeHandler} type='text' name='place' placeholder='Enter a place' />
                <div id="error"></div>
                <select name='month'>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
                <select name='year'>
                  <option value="2017">2017</option>
                  <option value="2016">2016</option>
                  <option value="2015">2015</option>
                </select>
                <input type='submit' value='submit' />
            </form>
        </div>
    )

  }
}

export default Maps;