

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

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

[code]

    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 (長いので以下略)
    
[/code]

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

[code]

    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;
    
[/code]

子コンポーネント

[code]

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


CC BY-SA 4.0
2021-11-11T14:30:50.487
83569
2022-11-14T07:05:55.767
49048
question
reactjs
React　子コンポーネントから親コンポーネントのuseState書き換え時の警告


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

  * [レンダー中のいくつかの更新に関する警告](https://ja.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render)

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

[`useEffect`](https://ja.reactjs.org/docs/hooks-
reference.html#useeffect)でラップ、とは、例えば次のような実装を言います:

[code]

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

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


CC BY-SA 4.0
2021-11-12T00:42:37.287
83573
2021-11-12T00:42:37.287
2808
83569
answer