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;