why the use of mobx caused the onChange of the table twice? - mobx

Question

The first click on the page number will only trigger onChange once, and then click the page number will trigger twice.
codesandbox: https://codesandbox.io/s/late-shape-mznvvf?file=/demo.tsx
import "#arco-design/web-react/dist/css/arco.css";
import React from "react";
import { Table, TableColumnProps } from "#arco-design/web-react";
import { makeAutoObservable, runInAction } from "mobx";
import { observer } from "mobx-react";
class P {
pagination = {
current: 1,
pageSize: 2
};
constructor() {
makeAutoObservable(this, {
onChange: false
});
}
onChange(pagination) {
runInAction(() => {
this.pagination = pagination;
})
console.log("exec!");
}
}
const columns: TableColumnProps[] = [
{
title: "Name",
dataIndex: "name"
},
{
title: "Salary",
dataIndex: "salary"
},
{
title: "Address",
dataIndex: "address"
},
{
title: "Email",
dataIndex: "email"
}
];
const data = [
{
key: "1",
name: "Jane Doe",
salary: 23000,
address: "32 Park Road, London",
email: "jane.doe#example.com"
},
{
key: "2",
name: "Alisa Ross",
salary: 25000,
address: "35 Park Road, London",
email: "alisa.ross#example.com"
},
{
key: "3",
name: "Kevin Sandra",
salary: 22000,
address: "31 Park Road, London",
email: "kevin.sandra#example.com"
},
{
key: "4",
name: "Ed Hellen",
salary: 17000,
address: "42 Park Road, London",
email: "ed.hellen#example.com"
},
{
key: "5",
name: "William Smith",
salary: 27000,
address: "62 Park Road, London",
email: "william.smith#example.com"
},
{
key: "6",
name: "Jane Doe",
salary: 23000,
address: "32 Park Road, London",
email: "jane.doe#example.com"
},
{
key: "7",
name: "Alisa Ross",
salary: 25000,
address: "35 Park Road, London",
email: "alisa.ross#example.com"
},
{
key: "8",
name: "Kevin Sandra",
salary: 22000,
address: "31 Park Road, London",
email: "kevin.sandra#example.com"
},
{
key: "9",
name: "Ed Hellen",
salary: 17000,
address: "42 Park Road, London",
email: "ed.hellen#example.com"
},
{
key: "10",
name: "William Smith",
salary: 27000,
address: "62 Park Road, London",
email: "william.smith#example.com"
}
];
const application = new P();
const App = observer(() => {
return (
<Table
pagination={application.pagination}
columns={columns}
data={data}
onChange={(pagination) => application.onChange(pagination)}
/>
);
});
export default App;
why the use of mobx caused the onChange of the table twice?
know why the use of mobx caused the onChange of the table twice?