【react】子コンポーネントから親コンポーネントへ値を渡す方法

Question

いつも大変お世話になっております。

現在reactの勉強中で、子コンポーネントから親コンポーネントへ値を渡そうとしているのですが、
warningが出てしまいます。

調べたところ子コンポーネントでuseEffect()を使用すると大丈夫とあったのですが改善されないようです。

もともとVue使いでしたが、Vueでは子コンポーネントから親コンポーネントへ値を渡すことは
普通にあったのですが、Reactの場合はあまり行わないことなのでしょうか？

以下ソースコードを記述しますので
どなたか改善すべき箇所がわかる方がいらっしゃればご教授いただけますと幸いです。

それではどうぞ宜しくお願い致します。

# App.js

import {BrowserRouter, Routes, Route} from "react-router-dom";
import Home from "./components/Home";
import Parent from "./components/Parent";

const App = () => {
  return (
    <>

      <BrowserRouter>
        <Routes>

          <Route path="/" element={<Home/>}/>
          <Route path="/parent" element={<Parent/>}/>

        </Routes>
      </BrowserRouter>

    </>
  )
}

export default App;

# Parent.js

import {Link} from "react-router-dom";
import Child from "./Child";
import {useState} from "react";

const Parent = () => {

  const [value, setValue] = useState("");

  return (
    <>

      <h3>Parent</h3>
      <Link to="/">Homeへ</Link>

      <hr/>

      <Child setValue={setValue}/>

      <p>子コンポーネントから渡ってきた値 → {value}</p>

    </>
  )
}

export default Parent;

# Child.js

const Child = (props) => {

  const comment = "ok react."

  return (
    <>

      {props.setValue(comment)}

    </>
  )
}

export default Child;

エラー内容

Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`). To locate the bad setState() call inside `Child`,

Comments

[maisumakun]

> 調べたところ子コンポーネントでuseEffect()を使用すると大丈夫とあったのですが改善されないようです。

useEffectを使って、どのように書きましたか？

[matsuo_basho]

返信ありがとうございます。

以下のように記述していたのですが、
return で返しているところがいらなかったようです、、。

import {useEffect} from "react";

const Child = ({setValue}) => {

const comment = "ok react."

useEffect(() => {
setValue(comment);
}, [setValue]);

return (
<>

{setValue(comment)}

</>
)
}

export default Child;

Answer 1

質問にあるWarning が出る原因は、Child の return で返しているJSXの中に
{props.setValue(comment)} があるからです。useEffectを使ってこうします。

import { useEffect } from "react";

const Child = ({ setValue }) => {
  const comment = "ok react.";

  useEffect(() => {
    setValue(comment);
  }, [setValue]);

  return <></>;
}

export default Child;

**FYI： **

• 参考になる記事がQiitaに投稿されています：React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られたー Warning: Cannot update a component while rendering a different component

• 上記の投稿からもリンクがありますが、当該Warningについて公式ドキュメントでは、React v16.13.0のリリースにおいて、

レンダー中のいくつかの更新に関する警告
で言及されています。

Comments

[matsuo_basho]

ありがとうございます！！
勉強になります！