0

Reactで子コンポーネントから親コンポーネントのuseState書き換え時の警告の修正方法がわかる方
ご教示いただけますと幸いです。

実行画面がエラーになりませんが、コンソールを開くと警告が出ていますこれを修正したいです。
コンソールの警告文

Warning: Cannot update a component (`App`) while rendering a different component (`Child`). To locate the bad setState() call inside `Child`, follow the stack trace as described (長いので以下略)

React 17.0.2です。
下記コード
親コンポーネント

import React, { useState } from 'react';
import {Child} from './Child.js';

const App = () => {
const[child,setChild] = useState("");
return(
<div>
 <Child test={setChild}/>
 {child}
</div>
);
}
export default App;

子コンポーネント

const Child = (props) => {
const message = "ハローワールド"
return(
<p>{props.test(message)}</p>
)
}
export default Child; 

1 件の回答 1

1

質問文中のコードからやりたいことが明確には分かりませんでしたが、エラーの原因と対応は公式blogに記載があります。

React コンポーネントは、レンダー中に他のコンポーネントに副作用を起こしてはいけません。

レンダー中に setState を呼び出すことはサポートされていますが同じコンポーネントに対してのみ可能です。
(中略)
レンダーの結果として他のコンポーネントの状態を意図的に変更したいという稀なケースでは、setState 呼び出しを useEffect にラップすることができます。

useEffectでラップ、とは、例えば次のような実装を言います:

import { useEffect } from "react";

const Child = ({ test }) => {
  const message = "ハローワールド";
  useEffect(() => test(message), [test]);
  return <p></p>;
};
export default Child;

("稀なケース" とある通り、このように実装しようとしていること自体が間違っているケースも多いと思います)

1
  • ご説明不足で申し訳ございません。 「子コンポーネントから親コンポーネントへの値渡し」を実装しようとしました。 参考元のリンクは控えますが上記のキーワードで検索すると記事がいくつかヒットするのでその一つを試しました。 するとコンソールに質問内容の警告があり質問した次第です。 setState呼び出しをuseEffect にラップするという方法を教えていただきありがとうございます、無事解決しました。
    – arex
    Commented 2021年11月12日 1:55

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。