React 中的 useEffect Hook 导致无限循环

Question

I am new to React Hooks.I don't know why it's causing infinite loops.I have specified commentArr in the dependency array which is only updated for once, after component has been rendered for the first time.I read that leaving dependency array empty will run useEffect for only once.It solved my problem (infinite loops) but then React gave me this warning.

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

Here is my component using Hooks. How could i solve the infinite loops problem without any warning?

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;

Answer 1

In this code that you wrote :

  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])

this console.log(commentArr); hints to react as a dependency. instead just use this:

   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);