title: mobx react for deleting row should trigger twice to update view
body: <p>I have a problem with <code>mobx</code> in <code>react</code>.
  I made a table with <code>antd</code> component. I want to when clicked on row delete that row 
  so when I click I trigger an @action that use delete method and then triggers the @action for the get request . when I click on delete icon it deletes in my server that I made with nodeJs but it won't re render the table and when I click on delete again it will re-render. but in network tab both of the request are the same.<br>
  appreciate any help.<br>
  my nodeJs delete method:</p>
  
  <pre><code>app.delete("/api/accommodation/delete/:id", function(req, res) {
  fs.readFile("./data/accommodation.json", function(err, data) {
    var deleteId = req.params.id;
    console.log("deleted", deleteId);
    const parsedData = JSON.parse(data);
    parsedData.map((item, index) =&gt; {
      if (item.id == deleteId) {
        parsedData.splice(index, 1);
      }
    });
    fs.writeFile(
      "./data/accommodation.json",
      JSON.stringify(parsedData),
      function(error, writeData) {}
    );
  });
  
  res.end();
  </code></pre>
  
  <p>});</p>
  
  <p>my table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  const ReactDOM = require("react-dom");
  import { Layout, Table, Row, Col, Button, Input, Pagination } from "antd";
  import { inject, observer } from "mobx-react";
  import { observable } from "mobx";
  import { MdSearch } from "react-icons/md";
  
  const { Header, Content } = Layout;
  const Search = Input.Search;
  
  @inject("stores")
  @observer
  export default class Services extends Component {
    @observable
    store = this.props.stores.services;
  
    componentDidMount() {
      this.store.getAccommodationData(this.store.tableQuery);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Layout&gt;
            &lt;Header&gt;
              &lt;h3&gt;خدمات&lt;/h3&gt;
            &lt;/Header&gt;
  
            &lt;Content style={{ marginTop: "100px" }}&gt;
              &lt;Row&gt;
                &lt;Col span={20} offset={2}&gt;
                  &lt;Row&gt;
                    &lt;Col span={2}&gt;
                      &lt;Button type="primary"&gt;new +&lt;/Button&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;br /&gt;
  
                  &lt;Row&gt;
                    &lt;Col span={5}&gt;
                      &lt;Input
                        placeholder="Enter your username"
                        prefix={&lt;MdSearch /&gt;}
                        value={this.store.searchField}
                        onChange={e =&gt; this.store.onSearch(e)}
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
  
                  &lt;br /&gt;
                  &lt;Row&gt;
                    &lt;Col span={24}&gt;
                      &lt;Table
                        dataSource={this.store.dataSource}
                        columns={this.store.columns}
                        pagination={false}
                        rowKey={record =&gt; record.id}
                        onChange={this.store.changeTable}
                      /&gt;
                      &lt;Row&gt;
                        &lt;br /&gt;
                        &lt;Col span={24}&gt;
                          &lt;Pagination
                            style={{ direction: "ltr" }}
                            defaultCurrent={1}
                            total={this.store.totalPage}
                            pageSize={1}
                            onChange={e =&gt; this.store.pageChange(e)}
                          /&gt;
                        &lt;/Col&gt;
                      &lt;/Row&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/Content&gt;
          &lt;/Layout&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>my store:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { observable, action } from "mobx";
  import React from "react";
  import { MdEdit } from "react-icons/md";
  
  export default class Services {
    @observable
    dataSource = [];
  
    @observable
    columns = [
      {
        title: "Id",
        dataIndex: "id",
        key: "id"
      },
      {
        sorter: true,
        title: "Name",
        dataIndex: "name",
        key: "name"
      },
      {
        sorter: true,
        title: "Provider",
        dataIndex: "provider",
        key: "provider"
      },
      {
        sorter: true,
        title: "Location",
        dataIndex: "location",
        key: "location"
      },
      {
        title: "Type",
        dataIndex: "type",
        key: "type"
      },
      {
        title: "Action",
        key: "action",
        render: (text, record) =&gt; (
          &lt;span&gt;
            &lt;MdEdit
              style={{ cursor: "pointer" }}
              onClick={() =&gt; this.deleteRow(record)}
            /&gt;
          &lt;/span&gt;
        )
      }
    ];
  
    @observable
    totalPage = 0;
  
    @observable
    currentPage = 1;
  
    @observable
    tableQuery = {
      c: 5,
      p: this.currentPage,
      s: "",
      sk: "",
      d: "",
      q: ""
    };
  
    @observable
    sortKey = "";
  
    @observable
    sortOrder = "";
  
    @observable
    searchField = "";
  
    @action
    deleteRow(record) {
      console.log("deleted");
      this.deleteData(record.id);
    }
  
    @action
    async deleteData(id) {
      fetch("http://localhost:1234/api/accommodation/delete/" + id, {
        method: "DELETE"
      })
        .then(this.getAccommodationData(this.tableQuery))
        .then(console.log(this.dataSource));
    }
  
    @action
    changeTable = (pagination, filters, sorter) =&gt; {
      this.sortKey = sorter.field;
      this.sortOrder = sorter.order;
      this.tableQuery.sk = this.sortKey;
      if (this.sortOrder == "ascend") {
        this.tableQuery.s = "asc";
      } else if (this.sortOrder == "descend") {
        this.tableQuery.s = "dec";
      }
      this.getAccommodationData(this.tableQuery);
    };
  
    @action
    pageChange(pageNumber) {
      this.currentPage = pageNumber;
      this.tableQuery.p = this.currentPage;
      this.getAccommodationData(this.tableQuery);
    }
  
    @action
    onSearch(e) {
      this.searchField = e.target.value;
      if (this.searchField != "") {
        this.tableQuery.d = 1;
      }
      this.tableQuery.q = this.searchField;
      this.getAccommodationData(this.tableQuery);
    }
  
    @action
    async getAccommodationData(query = this.tableQuery) {
      fetch(
        "http://localhost:1234/api/accommodation?" +
          "c=" +
          query.c +
          "&amp;p=" +
          query.p +
          "&amp;s=" +
          query.s +
          "&amp;sk=" +
          query.sk +
          "&amp;d=" +
          query.d +
          "&amp;q=" +
          query.q,
        {
          method: "GET",
          cors: "no-cors"
        }
      )
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.dataSource = data.requestedData;
          this.totalPage = data.total;
        });
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/GjlvK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GjlvK.png" alt="my network tab"></a></p>