reactでuseEffectでREST APIを叩いて得たデータをpropsとして渡したい
useEffect内でapiを叩き、useStateを利用してresデータを保管したものをpropsで子コンポーネントに渡した時、子コンポーネント内のuseEffectではuseStateで初期値として設定した値が表示されてしまいます。
これを解決する方法はありますでしょうか?
js
1//Parent.tsx 2 3const Parent: React.FC = () => { 4 const [name, setName] = useState('takeshi') 5 6 useEffect(() => { 7 ;(async () => { 8 const res = await props.fetcher() //親コンポーネントでget処理記述 9 10 setName(res.data.name) //ここでhiroshiをsetできたとする 11 })() 12 }, []) 13 14 return ( 15 <Child name={name} /> 16 <p>{name}</p> //ここではhiroshi 17 )
js
1//Child.tsx 2 3const Parent: React.FC = (props) => { 4 const [name, setName] = useState('takeshi') 5 6 useEffect(() => { 7 setName(props.name) 8 }, []) 9 10 return ( 11 <p>{name}</p> //ここではtakeshi 12 )

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/22 09:44