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;

Answer 1

在您編寫的這段代碼中：

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