【React】Object.assign({},)を使ってオブジェクトの値を変更してもレンダリングされずチェックボックスが変わらない

Question

onChangeに直接書いたりreturnの中でmapを使ってループさせる書き方など試してみましたがうまくいきません。

import React, { useEffect, useState, useContext } from "react";
import { useHistory } from 'react-router-dom';
import { storage, db } from "../firebase.js";

const SelectBan = () => {

  const [rulFlg, setRulFlg] = useState({});
  const [rul, setRul] = useState([]);

  useEffect(() => {
    const docRef = db.collection("terBn").orderBy("index");
    docRef.get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        let data = doc.data();
        rulFlg[doc.id] = data.default;

        setRules(oldForm => [...oldForm,
          <label className="bnLabel" htmlFor={doc.id} key={doc.id}>
            <input
              id={doc.id}
              type="checkbox"
              name="bnRules"
              checked={rulFlg[doc.id]}
              onChange={handleChange}
              value={doc.id}
            />
            {data.rule}
          </label>
        ]);
        setRulesFlg(Object.assign({}, rulFlg))
      });
    }).catch(function(error) {
      console.log("Error getting document:", error);
    });
  }, [])

  const handleChange = (e) => {
    // rulFlg[e.target.value]の値はしっかり取れてます
    rulFlg[e.target.value] = !rulFlg[e.target.value]
    setRulFlg(Object.assign({}, rulFlg))
  }

  const handleSubmit = () => {
  }

  return (
    <div className="selectBan">
      <div className="formTitle">アイテムの選択</div>
      <div className="formCheckbox">
        {rul}
      </div>
      <button onClick={handleSubmit}>完了</button>
    </div>
  );
}

export default SelectBan;

Answer 1

コードをmapで生成したのとコード用のuseStateを消してuseStateを値用のみしたところうまく作動しました。
詳細はわかりませんが、2つのuseStateがぶつかって再レンダリングができなくなったぽいです。

import React, { useEffect, useState, useContext } from "react";
import { useHistory } from 'react-router-dom';
import { storage, db } from "../firebase.js";

const SelectBan = () => {

  const [rulFlg, setRulFlg] = useState({});

  useEffect(() => {
    const docRef = db.collection("terBan").orderBy("index");
    docRef.get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        let data = doc.data();
        rulFlg[doc.id] = [data.default, data.rule];
        setRulFlg(Object.assign({}, rulFlg))
      });
    }).catch(function(error) {
      console.log("Error getting document:", error);
    });
  }, [])

  const handleChange = (e) => {
    rulFlg[e.target.value] = [!rulFlg[e.target.value][0], rulFlg[e.target.value][1]]
    setRulFlg(Object.assign({}, rulFlg))
  }

  const handleSubmit = () => {

  }


  return (
    <div className="selectBan">
      <div className="formTitle">禁止事項の選択</div>
      <div className="formCheckbox">
        {
          Object.keys(rulFlg).map(key => {
            return (
              <label className="banLabel" htmlFor={key} key={key}>
                <input
                  id={key}
                  type="checkbox"
                  name="bnRules"
                  checked={rulFlg[key][0]}
                  onChange={handleChange}
                  value={key}
                />
                {rulFlg[key][1]}
              </label>
            )
          })
        }
      </div>
      <button onClick={handleSubmit}>完了</button>
    </div>
  );
}

export default SelectBan;

Answer 2

~~
rulFlg[e.target.value] = !rulFlg[e.target.value]
~~
で代入しちゃっているのが原因かと思われます。

~~const useStateの時で試したことはないのでちょっとあやふやですが、
通常、stateに値を直接代入すると、rerenderは走りませんが、値は書き換わるので、その後で同じ値をsetStateしても、値に変更がないとみなされてrerenderがスキップしていると思います。
~~

Comments

[nakamu]

オブジェクトの代入はこちらと同じやり方で行ってます。
https://diary.app.ssig33.com/407

[Hogeike]

よく考えたら参照は変わっていますからrerenderはされるはずですね。失礼しました。