Reactでページが更新されてもstateを保持したまま表示したい

Question

#Todoリストを作成しています。
Reactで完了したタスクをチェックするチェックボックスを実装したいです。

チェックボックスのtrueとfalseの状態の更新はstateで出来る様になったのですが、ページを更新したり、ページ遷移したりするとチェックした筈の項目がチェックされていない状態に戻ってしまいます。

stateの初期状態が表示されてしまっているのは理解しているのですが、どうしたら更新されたstateの状態を保持したまま画面遷移したりページを更新したり出来るのでしょうか。

ご教示頂けますと幸いです。
宜しくお願い致します。

該当のソースコード

import React from "react";
import axios from "axios";

class Todo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      check1: false,
      check2: false,
      check3: false,
    };
  }

  componentDidMount() {
    axios.get("http://hoge").then((res) => {
      this.setState({ posts: res.data });
    });
  }

  handleChange = (e) => {
    let name = e.target.name
    if (name === e.target.name) {
    this.setState({[e.target.name]: !this.state.[e.target.name]})
  }}

  render() {
    return (
      <div>
        {this.state.posts.map((post, index) => {
          return (
            <div key={index}>
              <label onLoad={() => this.componentDidMount()}>
                {post.created_at}
              </label><br/>
              <label onLoad={() => this.componentDidMount()}>
                <input type='checkbox' name='check1' checked={this.state.check1} onChange={this.handleChange} />
                {post.list_one}
              </label><br />
              <label onLoad={() => this.componentDidMount()}>
                <input type='checkbox' name='check2' checked={this.state.check2} onChange={this.handleChange} />
                {post.list_two}
              </label><br />
              <label onLoad={() => this.componentDidMount()}>
                <input type='checkbox' name='check3' checked={this.state.check3} onChange={this.handleChange}/>
                {post.list_three}
              </label>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Todo;

Answer 1

お手軽に試したいのならデータの保存先として localStorage を使ってみるのが良いのではないでしょうか。
リロードしてもデータを保持するためには「localStorage」 - Qiita

もうちょっと本格的に Web サーバーにデータ保存したい！けれどサーバーを書くのは面倒くさい……というのであれば
jsonbox.io | A Free HTTP based JSON storage
というフリーで 30 日間だけ使える JSON 形式のデータベースサーバーなんかもあります。
（日本語解説記事：無料JSONストレージjsonboxを試してみた！ | Developers.IO）

データの永続化にはサーバーの知識が必要になってくると思いますので、後者で感覚を掴んでみるのがよいかもしれませんね。

Comments

[CHAN_]

やはりデータをどこかに一旦保存して、保存されたものを表示する様にするんですね。

ご丁寧に参考サイトまで教えて頂きありがとうございます！
自分でも調べてみたところReduxを使っても出来る様なので、そちらも試してみたいと思います。

ご教示くださりありがとうございました。

[A_kirisaki]

Redux ではページ更新してしまうとデータ消えてしまいますよ！