2

私は簡単なコードを持っています

<test>
<ul>
  <li each={ books }> { title }</li>
</ul>

<button type="button" name="button" onclick={ loadBooks }>Load books</button>

<script>
  'use strict';

  this.books = [];
  let offset = 0;

  this.on('mount', () => {
    console.log('mounted');
  });

  this.on('update', () => {
    console.log('updated');
  });

  loadBooks ()  {
    fetch('/api/books?limit=10&offset='+offset)
    .then(response => response.json())
    .then(books => {
      offset+=10;
      this.books = books;
      // this.update();
    })
    .catch(err => console.log(err));
  }
</script>

私のapp.jsでは、暴動、test.tagをrequrieするだけで、riot.mount('#root', 'test'); これはinit画面ですが、マウントの前に更新が発生するのはなぜですか? ここに画像の説明を入力 初めてクリックすると、更新が発生したことを記録しますが、ビューは再レンダリングされず ここに画像の説明を入力 、2回目のクリックの後、イベント更新が発生し、ビューが再レンダリングされます ここに画像の説明を入力 ここに画像の説明を入力

this.update();promise 内でコメントを外すと、イベントの更新が 2 回発生します

upd: イベントの削除this.books = booksと書き込みのthis.update({books});場合、更新は 2 回発生し、レンダリングは機能しますが、なぜ 2 回ですか?

4

1 に答える 1