push в mobx зацикливается в геометрическое прогрессии

Получение данных растёт в геометрической прогрессии, получаю данные и хочу их записать в массив, но когда нажимаю на кнопку в первый раз добавляется 200 данных если второй раз нажать, то 800, хотя каждый раз приходят всего 200, то есть идёт зацикливание бесконечное и всё больше данных парсятся хотя так не должно работать

this.todos.push 

import { makeAutoObservable, makeObservable } from "mobx"

class Todo {
    todos = [
        { userId: 1, id: 1, title: '2311111111111', completed: false },
        { userId: 1, id: 1, title: '21322222222', completed: false },
        { userId: 1, id: 1, title: '3211111111111', completed: false },
    ]

    fetchtodo() {
        console.log("вызов");

        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(response => response.json())
            .then(data => {

console.log("1");
this.todos.push(...data, ...this.todos);
            })

    }
}

export default new Todo

код вызова в другом компоненте

function test() {

    console.log("вызов fetchtodo");
    Todo.fetchtodo();
}


Todo.todos.map((todo) => {
    console.log(todo.title);

});

Ответы (1 шт):

Автор решения: Dmitry Kozlov

Ошибка в

this.todos.push(...data, ...this.todos);
                         ~~~~~~~~~~~~~~~

вы добавляете в todos новые записи из data плюс всё, что до этого было в todos

Справка по push

→ Ссылка