У меня проблема с mobx в react.
Я сделал таблицу с antd компонентом. Я хочу, чтобы при нажатии на строку удалить эту строку
поэтому, когда я нажимаю, я запускаю @action, которая использует метод delete, а затем запускает @action для запроса get. когда я нажимаю на значок удаления, он удаляет на моем сервере, который я сделал с помощью nodeJs, но он не будет перерисовывать таблицу, а когда я снова нажимаю на удаление, он перерисовывает. но во вкладке сети оба запроса одинаковы.
признателен за любую помощь.
мой метод удаления nodeJs:
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) => {
if (item.id == deleteId) {
parsedData.splice(index, 1);
}
});
fs.writeFile(
"./data/accommodation.json",
JSON.stringify(parsedData),
function(error, writeData) {}
);
});
res.end();
});
мой стол:
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 (
<div>
<Layout>
<Header>
<h3>خدمات</h3>
</Header>
<Content style={{ marginTop: "100px" }}>
<Row>
<Col span={20} offset={2}>
<Row>
<Col span={2}>
<Button type="primary">new +</Button>
</Col>
</Row>
<br />
<Row>
<Col span={5}>
<Input
placeholder="Enter your username"
prefix={<MdSearch />}
value={this.store.searchField}
onChange={e => this.store.onSearch(e)}
/>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Table
dataSource={this.store.dataSource}
columns={this.store.columns}
pagination={false}
rowKey={record => record.id}
onChange={this.store.changeTable}
/>
<Row>
<br />
<Col span={24}>
<Pagination
style={{ direction: "ltr" }}
defaultCurrent={1}
total={this.store.totalPage}
pageSize={1}
onChange={e => this.store.pageChange(e)}
/>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
</Content>
</Layout>
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
мой магазин:
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) => (
<span>
<MdEdit
style={{ cursor: "pointer" }}
onClick={() => this.deleteRow(record)}
/>
</span>
)
}
];
@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) => {
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 +
"&p=" +
query.p +
"&s=" +
query.s +
"&sk=" +
query.sk +
"&d=" +
query.d +
"&q=" +
query.q,
{
method: "GET",
cors: "no-cors"
}
)
.then(response => response.json())
.then(data => {
this.dataSource = data.requestedData;
this.totalPage = data.total;
});
}
}
