回答編集履歴

質問者より2を実施するという質問の修正があったため、回答を修正します。

2020/01/28 03:13

投稿

nerianighthawk

スコア544

test CHANGED Viewed

@@ -49,3 +49,231 @@
 2つの方法を提示しましたが、冒頭に述べた通り、どちらも根本的な修正が必要な回答になってしまいました。
 あまりいい手段を提示できなくてすみません。
+----以下追記-----
+2の方法で実践したいとのことで、いくつか問題点を上げていただいたので、その回答として追記します。
+まず、checkボタンもレンダリングしてしまう問題についてはもう一つcheck用の変数を用意することで、そのcheckの真偽値によって分岐する関数を親コンポーネントで作ることによって、ボタンを親コンポーネントに持つことができます。
+また、2回レンダリングをする件についても同じようにchildのcheck用変数を用意することで解決できます。
+そもそも2回レンダリングをしてしまう原因ですが、childをアンマウントするタイミングと、openの変化によってparentのテキストフィールドを空にするタイミングの2回でレンダリングしてしまうからです。
+これをcheck用の変数が切り替わるタイミングのみでのレンダリングにすることによって、1回のレンダリングにまとめることができます。
+以下、ソースコードを載せます。雑に作ったので、関数内の変数名がbだったりしますが、ご了承ください。
+```
+const App = () => {
+  parent++;
+  console.log("parent: " + parent);
+  const [open, setOpen] = useState(false);
+  const [checkOpen, setCheckOpen] = useState(false);
+  const [checkClose, setCheckClose] = useState(false);
+  const checkParrentText = b => {
+    if (b) {
+      setOpen(true);
+      return;
+    }
+    alert("The text is incorrect.");
+  };
+  return (
+    <>
+      <ParentHeader />
+      <ParentInput checkClose={checkClose} setCheckOpen={setCheckOpen} />
+      <button onClick={() => checkParrentText(checkOpen)}>check text</button>
+      <div>
+        {open && (
+          <Child
+            setOpen={setOpen}
+            check={checkClose}
+            setCheck={setCheckClose}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+const ParentInput = ({ checkClose, setCheckOpen }) => {
+  parentInput++;
+  console.log("ParentInput: " + parentInput);
+  const [parentText, setParentText] = useState("");
+  useEffect(() => {
+    if (checkClose) setParentText("");
+  }, [checkClose]);
+  useEffect(() => {
+    if (parentText === "open") {
+      setCheckOpen(true);
+    }
+  }, [parentText, setCheckOpen]);
+  return (
+    <>
+      <input
+        type="text"
+        value={parentText}
+        onChange={e => setParentText(e.target.value)}
+      />
+    </>
+  );
+};
+const Child = memo(({ setOpen, check, setCheck }) => {
+  child++;
+  console.log("child: " + child);
+  const checkChildText = b => {
+    if (b) {
+      setOpen(false);
+      return;
+    }
+    alert("The text is incorrect.");
+  };
+  return (
+    <>
+      <ChildHeader />
+      <ChildInput setCheck={setCheck} />
+      <button onClick={() => checkChildText(check)}>check text</button>
+    </>
+  );
+});
+const ChildInput = ({ setCheck }) => {
+  childInput++;
+  console.log("ChildInput: " + childInput);
+  const [childText, setChildText] = useState("");
+  useEffect(() => {
+    if (childText === "close") {
+      setCheck(true);
+    }
+  }, [childText, setCheck]);
+  return (
+    <>
+      <input
+        type="text"
+        value={childText}
+        onChange={e => setChildText(e.target.value)}
+      />
+    </>
+  );
+};
+export default App;
+```