React Hook useEffect 缺少依赖项“messages”

如何解决React Hook useEffect 缺少依赖项“messages”

我第一次尝试使用 MERN，但现在我坚持使用返回上述警告的代码，虽然编译有效，但缺少一些活动。我附上了我的部分代码。

import React,{ useEffect,useState } from "react";
import "./App.css";
import Chat from "./Chat";
import Sidebar from "./Sidebar";
import Pusher from 'pusher-js';
import axios from './axios'

function App() {
  const [messages,setMessages] = useState([])

  useEffect(() =>{
    axios.get('/messages/sync').then((response) => {
      setMessages(response.data)
    })
  },[])

  useEffect(() => {
    const pusher = new Pusher('----------------',{
      cluster: '^^^'
    });

    const channel = pusher.subscribe('message');
    channel.bind('inserted',(newMessage) => {
      alert(JSON.stringify(newMessage));
      setMessages([...messages,newMessage])
    });
  },[])

  console.log(messages)

  return (
    <div className="app">
      <div className="app_body">
        <Sidebar />
        <Chat />
      </div>
    </div>
  );
}

export default App;

这是控制台输出：

Compiled with warnings.

./src/App.js
  Line 27:6:  React Hook useEffect has a missing dependency: 'messages'. Either include it or remove the dependency array. You can also do a functional update 'setMessages(m => ...)' if you only need 'messages' in the 'setMessages' call  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore,add // eslint-disable-next-line to the line before.

我正在尝试使用在线视频教程构建此应用程序，但这是我遇到的问题。如何解决这个问题？

解决方法

因为您在 messages 中使用状态 useEffect。您只是在调用 setMessages 时使用函数来更新状态，如下所示：

setMessages(preMessages => ([...preMessages,newMessage]))

现有的答案都没有解释为什么这是必要的。

useEffect 钩子可以在 3 种情况下运行：

useEffect(fn) 每次渲染组件时都会运行
useEffect(fn,[]) 在您的组件第一次挂载时运行
useEffect(fn,[var1,var2]) 最初运行，然后任何时候 var1 或 var2 发生变化。

您收到警告的原因是 linter 检测到您在函数中使用了外部依赖项 (messages)，但它并未列为显式依赖项。因此，如果要更改 messages，useEffect 的版本将过时，并且可能会导致错误。