React中的useEffect Hook导致无限循环

Question

我是React Hooks的新手，我不知道为什么它会导致无限循环。我在依赖项数组中指定了 commentArr ，仅在为该组件渲染组件后才更新一次第一次，我读到将依赖项数组保留为空将只运行一次useEffect。它解决了我的问题（无限循环），但后来React给了我这个警告。

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

这是我使用Hooks的组件。我如何在没有任何警告的情况下解决无限循环问题？

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;