修復 React Hook useEffect 缺少依賴項

Question

我正在使用 useEffect Hook 設計一個組件，我似乎在我有 axios 調用的代碼中遇到錯誤。 我得到以下錯誤：

錯誤：

React Hook useEffect has a missing dependency: 'formData'. Either include it or remove the dependency array. You can also do a functional update 'setFormData(f =>...)' if you only need 'formData' in the 'setFormData'

我不確定為什么會收到此錯誤，因為我在代碼中提到了它的來源，並且因為我還使用了鈎子之外的信息，所以它似乎在邏輯上是正確的。 我正在尋找的最終結果是將 formData state 更新為從 axios 請求收到的值。 但是，這些值保持不變。 所以再次不確定我做錯了什么。

代碼：

import React, { useState, useEffect } from 'react';
import Aux from '../../hoc/Aux';
import Navbar from './Navbar';
import WeekSelection from './WeekSelection';
import axios from 'axios';



const Landing = () => {

    //useState to set up information
    const[formData,setFormData] = useState({
        name: 'Test',
        artist: 'Test',
        album: 'Test',
        duration: 'Test',
        url: 'https://i.scdn.co/image/ab67706c0000da848d0ce13d55f634e290f744ba'
    });



    const {
        name,
        artist,
        album,
        duration,
        url

    } = formData;

    


           


        useEffect(() => {
              
            axios.post('/')
            .then(res => {
                setFormData({
                    ...formData,
                    name: res.name,
                    artist: res.artist,
                    album: res.album,
                    duation: res.duration,
                    url: res.url
                });

                console.log(name);
                console.log(artist);
                console.log(album);
                console.log(duration);
                console.log(url);
            })
            .catch(err => {
                console.error(err.message);
            });

          

        
        }, []);




    return (
         
        <Aux>
            <div className="myLeft">

                <div className="company-name">
                    <span className="headphones">
                        <i className="fas fa-headphones"></i>
                    </span>
                    <h1 className="titleStyle">SilverStone</h1>
                </div>

                <WeekSelection />
                <WeekSelection />
                <WeekSelection />
                <WeekSelection />
                <WeekSelection />
            </div>

            <div className="myRight">
                <Navbar />
                 
            <div className="test">
                <img src="https://i.scdn.co/image/ab67616d0000b2730a2d690b414896b2bd008a53" alt="Spotify Cover Art" />
            </div>

            <div className="song-data">
                <h2 className="week">Monday</h2>



                <div className="song-box-data">
                    <div className="rectangle-1"></div>
                    <p className="song-styles">Song</p>
                    <div className="music-icon"></div>
                    
                </div>
                <p className="seeYouAgain">See You Again</p>
                    <div className="artist-line">                
                        <div className="by">By:</div>
                        <div className="artist-line-name">Wiz Knalifa ft. Charlie Puth</div>
                    </div>
                    <div className="time-info">                
                        <div className="duration">Duration</div>
                        <div className="minutes">4:54 min</div>
                        <div className="clock">
                            <i className="far fa-clock"></i>
                        </div>
                    </div>
            </div>
            </div>

        </Aux>

     
    )
};


export default Landing;

Answer 1

由於useEffect只是一個 function，它本身無法知道您的組件中有哪些變量或它們何時更新。 正如錯誤消息所述，您必須在useEffect （函數的第二個參數）的依賴數組中包含formData ，以便您提供給useEffect的 function 每次其依賴項（在本例中為formData ）更新時運行。

錯誤消息還提到您可以簡單地刪除依賴數組，這將使您的鈎子在每次更新組件時運行。 將一個空數組傳遞給useEffect有效地意味着“在創建組件時運行一次”，這與您在鈎子中使用formData相矛盾，因為該變量將在組件的整個生命周期內發生變化。 這是 React 文檔的相關部分： https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

如果您對 React Hooks 有任何其他疑問，我建議您仔細閱讀文檔。 它們非常完整，應該可以回答您關於鈎子和反應性的大多數問題。

Answer 2

這就是你可以解決它的方法。

import React, { useState, useEffect } from "react";
import axios from "axios";

const Landing = () => {
  const [formData, setFormData] = useState(null);

  useEffect(() => {
    axios
      .post("/")
      .then(res => {
        const { name, artist, album, duration, url } = res;
        setFormData({ name, artist, album, duration, url });
      })
      .catch(err => {
        console.error(err.message);
      });
  }, []);

  if (!formData) return <p>loading</p>;
  return <div>{JSON.stringify(formData)}</div>;
};

export default Landing;