修复 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;