Reactjs - Невозможно отобразить в моем компоненте значения this.state.item из моего api сервлета

Из моего приложения ReactJS я отправляю JSONRequest во внешнюю систему через сервлет Java и получаю ответ от этого сервлета. Этот ответ я должен установить в моем компоненте React.

Но у меня проблема. Я не могу установить значения для самого первого ответа. Если я вручную обновляю страницу, эти значения устанавливаются правильно. И затем, если я отправляю запрос во второй раз с теми же значениями формы, в этот раз я могу отобразить значения ответа без какого-либо ручного обновления.

Во время самого первого ответа формы я не могу установить значение ответа.

Пожалуйста, найдите мой код ниже, который я пытаюсь.

class Orders extends React.Component {
  constructor(props) {
    super(props);
    this.publishToOracle = this.publishToOracle.bind(this);
  }

  publishToOracle(id) {
    var item=this.state.item;
    ajax({
      url: 'api/publish_oracle',
      method: 'POST',
      data: { id: id }

    },
   (data) => {
     if (data.error == null) {
       alert('Order has been published to Oracle Successfully') 
       item.oracle_number=data.result.oracle_number;
       this.setState({ view: 'Details', item: data.result});
       console.info("Order Number-->"+JSON.stringify(this.state.item.oracle_number)); // Oracle Number is printing here every time. But not in the component.
     } else if (data.error != null) {
       alert(data.error);
     }
   });
  }


  render() {
    if (this.state.view == 'Details') {
      return (
        <Details
          item = { this.state.item }
          publishToOracle = {this.publishToOracle}
        />
      );
    }
  }
}



class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: props.item };
  }

  handlePublishToOracle(e) {
    var item = this.state.item;
    alert("Publishing to Oracle");
    e.preventDefault();
    item["oracle_order_number"] = "";
    item["oracle_response_message"] = "";
    item["oracle_response_status"] = "";
    this.props.publishToOracle(item.id);
 }

 handleActionButtons() {
   if (this.state.action == "PublishToOracle") {
     return (
       <button
         type = "submit"
         onClick = { this.handlePublishToOracle}
       >
         Publish To Oracle
       </button>
     );
   }
  }

  render() {
    return (
      <select
        name = "action"
        value = {this.state.action}
        onChange = {this.handleAction}
      >
        <option value = "PublishToOracle"> Publish To Oracle</option>
      </select>
      { this.handleActionButtons() }
      <input
        name = "oracle_number"
        type = "text"
        maxLength = "20"
        value = { this.state.item.oracle_number }
      />
     );
   }
}

Фактически, функциональность API заключается в том, чтобы получить ответ, сохранить его в моей MongoDB и отобразить в React UI.