無限ループを引き起こすReactのuseEffectフック

debugcn 投稿 Dev

スラジョベライ

React Hooksは初めてですが、なぜ無限ループが発生するのかわかりません。依存関係配列にcommentArrを指定しましたが、コンポーネントが初めてレンダリングされた後、1回だけ更新されます。依存関係配列を空のままにしておくことを読みました。 useEffectを1回だけ実行します。これで問題（無限ループ）は解決しましたが、Reactからこの警告が表示されました。

Line 31:7:  React Hook useEffect has a missing dependency: 'commentArr'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

これがフックを使った私のコンポーネントです。警告なしに無限ループの問題を解決するにはどうすればよいですか？

import React, {useEffect, useState} from 'react'

import Footer from './Footer'
import Navigation from './Navigation'
import styles from "../assets/css/calc.module.css"
import Comment from './Comment'
import PostComment from './PostComment'
import assets from '../assets'
import axios from "../axiosConfig"
import AnsModal from './AnsModal'

function Calc(props) {

    const [commentArr, setCommentArr] = useState(null);

    useEffect(() => {
        axios.get('/comments.json')
            .then(res => {
                // for transforming object of objects into array of objects
                let allComments = []
                for (let key in res.data) {
                    allComments.push({
                        id: key,
                        ...res.data[key]
                    })
                }
                setCommentArr(allComments)
                console.log(commentArr);
            })
            .catch(err => console.log(err))
    },[commentArr])
    return (
    <>
        <div className="container bg-white shadow text-muted p-4">
            <Navigation />
            <div className="row d-flex justify-content-center m-2">
                <div className="col-md-8 col-12 text-justify">
                    Let this calculator do the heavy lifting.This formula helps you to calculate equivalent worth (Future Worth, F) given the values of Present Worth (P),
                    interest rate per year (effective interest rate) and time (investment duration).
                </div>
            </div>


            <div className="row">
                <div className="col-md-6 col-12">
                    <img src={assets[props.location.state.imagePath]} alt="image1" className={styles.image}/>
                </div>
                <div className="col-md-6 col-12">
                    <h4>Fill in the values.And get answers in seconds.</h4>
                    <hr style={{background: '#55b8cf', height: '6px'}}/>
                    <div className="form-group">
                        <label htmlFor="firstInput">{props.location.state.sum} value</label>
                        <input type="text"  id="firstInput" className="form-control" placeholder="e.g. 10000"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="secondInput">i value</label>
                        <input type="text" id="secondInput" className="form-control" placeholder="e.g. type 0.1 for 10%"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="thirdInput">n value</label>
                        <input type="text" id="thirdInput" className="form-control" placeholder="e.g. 5"/>
                    </div>
                    <div className="text-center">
                        <AnsModal />
                    </div>
                </div>
            </div>
            <h4>Comments</h4>
            <hr style={{background: '#55b8cf'}}/>

            <div className="row">
                <div className="col-md-6 col-12">
                    <Comment />
                    <Comment />
                    <Comment />
                    
                </div>
                <div className="col-md-6 col-12">
                    <PostComment />
                </div>
            </div>
            <hr style={{background: '#55b8cf'}}/>
            <Footer />
            
        </div>
        
    </>
    )
}
export default Calc;

Farhad Azarbarzinniaz

あなたが書いたこのコードでは：

  useEffect(() => {
    axios.get('/comments.json')
        .then(res => {
            // for transforming object of objects into array of objects
            let allComments = []
            for (let key in res.data) {
                allComments.push({
                    id: key,
                    ...res.data[key]
                })
            }
            setCommentArr(allComments)
            console.log(commentArr);
        })
        .catch(err => console.log(err))
},[commentArr])

これconsole.log(commentArr);は、依存関係として反応することを示唆しています。代わりにこれを使用してください：

   useEffect(() => {
    axios.get('/comments.json')
        .then(res => {
            // for transforming object of objects into array of objects
            let allComments = []
            for (let key in res.data) {
                allComments.push({
                    id: key,
                    ...res.data[key]
                })
            }
            setCommentArr(allComments)
  
        })
        .catch(err => console.log(err))
},[]);
 console.log(commentArr);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]