设置后，state值返回null。需要另一个函数的状态值

Question

我有一份记录清单。每个记录都有一个按钮，用于将当前记录ID发送到切换功能以进行编辑。该函数接收记录的id，但是当它尝试使用该id设置状态值时，它返回null。我需要它用于其他函数，handleEditField()和handleEditItem()函数。

import React, { Component, PropTypes} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { updateTerritoryGeography } from '../actions/index.js';

import { getTerritoryGeographies, deleteTerritoryGeography } from '../actions/index';

import TerritoryTabs from './territory-tabs';

class TerritoryGeographyList extends Component {

  constructor(props) {
    super(props);

    this.state = {
      editing: null
    };

    this.toggleEditing = this.toggleEditing.bind(this);
  }

  componentWillMount() {
    this.props.getTerritoryGeographies(this.props.params.id);
    this.setState({editing : null});
  }

  toggleEditing( recordId ) {
     console.log("the current id of the record being edited");
     console.log( recordId );

     this.setState({editing : recordId});

     console.log("the editing value from state")
     console.log(this.state.editing);
  }

  // used when a single field is edited and enter is pressed
  handleEditField( event ) {
    if ( event.keyCode === 13) {
      console.log("handleEditField");
      console.log(event);
      let target = event.target,
      update = {};

      console.log("state value being called int handleEditField()");
      console.log(this.state.editing);
      update.id = this.state.editing;
      update[ target.name ] = target.value;

      this.updateTerritoryGeography( update, update.id );
    }
  }

  // used when multiple fields are edited
  handleEditItem() {
    let itemId = this.state.editing;

    this.updateTerritoryGeography({
      tpslead__Country__c: this.refs[ `Country_${ itemId }`].value,
      tpslead__State__c: this.refs[ `State/Province_${ itemId }`].value,
      tpslead__Zip_Start__c: this.refs[ `Postal_Start_${ itemId }`].value,
      tpslead__Zip_End__c: this.refs[ `Postal_End_${ itemId }`].value
    }, itemId)

  }


  onDeleteClick(id) {
    this.props.deleteTerritoryGeography(id);
  }

  static contextTypes = {
    router: PropTypes.object
  }

  return this.props.territoryGeographies.map((geography) => {

      // edit mode
      if (this.state.editing === geography.Id ) {
          return (

        <tr key={ geography.Id }>
          <th scope="row" data-label="Country">
            <div className="slds-truncate">
              <input onKeyDown={ this.handleEditField }
                className="slds-input inline"
                type="text"
                ref={`Country_${geography.Id}`}
                title="Country"
                defaultValue={geography.tpslead__Country__c}
              />
            </div>
          </th>
          <td data-label="State/Provice">
            <div className="slds-truncate">
              <input onKeyDown={ this.handleEditField}
                className="slds-input"
                type="text"
                ref={`State/Province_${geography.Id}`}
                title="State/Province"
                defaultValue={geography.tpslead__State__c}
              />
            </div>
          </td>
          <td data-label="Postal Start">
            <div className="slds-truncate">
              <input onKeyDown={ this.handleEditField}
               className="slds-input"
                type="text"
                ref={`Postal_Start_${geography.Id}`}
                title="Postal Start"
                defaultValue={geography.tpslead__Zip_Start__c}
              />
            </div>
          </td>
          <td data-label="Postal End">
            <div className="slds-truncate">
              <input onKeyDown={ this.handleEditField}
                className="slds-input"
                type="text"
                ref={`Postal_End_${geography.Id}`}
                title="Postal End"
                defaultValue={geography.tpslead__Zip_End__c}
              />
            </div>
          </td>
          <td className="slds-text-align--right" data-label="Action">
            <button onClick={this.handleEditItem} className="slds-button slds-button--icon" title="edit">
            <svg className="slds-button__icon" aria-hidden="true">
              <use xlinkHref={checkIcon}></use>
            </svg>
                  <span className="slds-assistive-text">Update</span>
                </button>
                <button onClick={ this.toggleEditing.bind(null, geography.Id)} className="slds-button slds-button--icon" title="delete" data-aljs="modal" data-aljs-show="PromptConfirmDelete">
            <svg className="slds-button__icon" aria-hidden="true">
              <use xlinkHref={closeIcon}></use>
            </svg>
                  <span className="slds-assistive-text">Cancel</span>
                </button>
          </td>
        </tr>

      );
      }
      // view mode
      else {
        return (
          <tr key={geography.Id} onClick={ this.toggleEditing.bind(null, geography.Id) }>
              <th scope="row" data-label="Country">
                <div className="slds-truncate">{geography.tpslead__Country__c}</div>
              </th>
              <td data-label="State/Provice">
                <div className="slds-truncate">{geography.tpslead__State__c}</div>
              </td>
              <td data-label="Postal Start">
                <div className="slds-truncate">{geography.tpslead__Zip_Start__c}</div>
              </td>
              <td data-label="Postal End">
                <div className="slds-truncate">{geography.tpslead__Zip_End__c}</div>
              </td>
              <td className="slds-text-align--right" data-label="Action">
                <button onClick={ this.toggleEditing.bind(null, geography.Id)} className="slds-button slds-button--icon" title="edit">
                      <svg className="slds-button__icon" aria-hidden="true">
                        <use xlinkHref={editIcon}></use>
                      </svg>
                      <span className="slds-assistive-text">Edit</span>
                    </button>
                    <button onClick={() => this.onDeleteClick(geography.Id)} className="slds-button slds-button--icon" title="delete" data-aljs="modal" data-aljs-show="PromptConfirmDelete">
                      <svg className="slds-button__icon" aria-hidden="true">
                        <use xlinkHref={deleteIcon}></use>
                      </svg>
                      <span className="slds-assistive-text">Delete</span>
                    </button>
              </td>
          </tr>
      );
      }
  });
  }

  render() {
    return (
    <TerritoryTabs id={this.props.params.id} listTab="geography">
          <Link to={"territory/" + this.props.params.id + "/geography/new"} className="slds-button slds-button--brand">
            Add New Geography
          </Link>
          <table className="slds-table slds-table--bordered slds-table--cell-buffer slds-m-top--large">
              <thead>
                <tr className="slds-text-title--caps">
                  <th scope="col">
                    <div className="slds-truncate" title="Country">Country</div>
                  </th>
                  <th scope="col">
                    <div className="slds-truncate" title="State/Provice">State/Provice</div>
                  </th>
                  <th scope="col">
                    <div className="slds-truncate" title="Postal Start">Postal Start</div>
                  </th>
                  <th scope="col">
                    <div className="slds-truncate" title="Postal End">Postal End</div>
                  </th>
                  <th className="slds-text-align--right" scope="col">
                    <div className="slds-truncate" title="Action">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody>
            {this.renderTerritoryGeographyList()}
              </tbody>
            </table>
    </TerritoryTabs>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);
  return { territoryGeographies: state.territoryGeographies.all
        };
}

export default connect(mapStateToProps, { getTerritoryGeographies, deleteTerritoryGeography, updateTerritoryGeography })(TerritoryGeographyList);

以下是控制台的截图。