# ステート更新後にウィジェットのHTMLをリロードする方法

**URL:** <https://meta.discourse.org/t/how-to-reload-a-widget-html-after-a-state-update/191897>\
**Category:** Development\
**Created:** [2021 年 5 月 28 日午前 7:51 UTC](https://meta.discourse.org/t/how-to-reload-a-widget-html-after-a-state-update/191897 "2021-05-28T07:51:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sachin\_Kumar\_J](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sachin_kumar_j/32/200375_2.png) [@Sachin\_Kumar\_J](https://meta.discourse.org/u/Sachin_Kumar_J)\
**Post date:** [2021 年 5 月 28 日午前 7:51 UTC](https://meta.discourse.org/t/how-to-reload-a-widget-html-after-a-state-update/191897/1 "2021-05-28T07:51:40Z")

</div>

ウィジェットの HTML を、状態が変更されたときに自動的に再読み込みするにはどうすればよいでしょうか？以下のコードでは、初期状態で状態は「none」ですが、ページが読み込まれた後に新しい状態に変わります。しかし、HTML はクリックしたときのみ変更されます。状態が更新されたときに自動的に更新するにはどうすればよいでしょうか？

```javascript
const h = require("virtual-dom").h;

api.createWidget("my-first-widget", {
  tagName: "div.navigationBar",
  buildKey: () => 'increment-button',

  defaultState() {
    api.onPageChange((url, title) => {
      this.name = "new state";
    });
    return {
      name: "none",
    };
  },

  html(attrs, state) {
    return h('h1', state.name);
  }
});

```