Question

我正在使用useEffect挂钩设计组件，我似乎在遇到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状态更新为从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只是一个函数，因此它本身无法知道组件中包含哪些变量或何时对其进行更新。如错误消息所言，您必须在formData（函数的第二个参数）的Dependecy数组中包含useEffect，以便您提供给useEffect的函数每次运行时都运行依赖项（在这种情况下为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;

修复React Hook useEffect缺少依赖项

2 个答案: