Javascript React Hook useEffect缺少一个依赖项“；信息“；

我第一次尝试使用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;

---

我试图建立一个在线视频教程这个应用程序，但这是发生在我身上的问题。如何解决此问题？

因为您正在

useffect

中使用状态

消息。您只需在调用
setMessages
时使用函数来更新状态，如下所示：

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

因为您正在
useffect
中使用状态
消息
。您只需在调用
setMessages
时使用函数来更新状态，如下所示：

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

现有的答案都不能解释为什么这是必要的

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


useffect（fn）
将在每次组件渲染时运行
useffect（fn，[]）
在组件首次装载时运行
useffect（fn，[var1，var2]）
最初运行，然后在
var1
或
var2
更改时运行

您收到警告的原因是，linter检测到您在函数中使用外部依赖项（
messages
），但是它没有作为显式依赖项列出。因此，如果要更改
消息
，则
useffect
的版本可能会过时，并且可能会导致错误。
当前的现有答案都没有解释为什么需要这样做

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


useffect（fn）
将在每次组件渲染时运行
useffect（fn，[]）
在组件首次装载时运行
useffect（fn，[var1，var2]）
最初运行，然后在
var1
或
var2
更改时运行

您收到警告的原因是，linter检测到您在函数中使用外部依赖项（
messages
），但是它没有作为显式依赖项列出。同样地，如果
消息
要更改，则
useffect
的版本将过时，并且可能会导致错误。
如果在
useffect
钩子的依赖项数组中添加
消息
，则代码将陷入状态更新和重新呈现的无限循环中。要避免在依赖项数组中添加
消息
，请将
setMessages（[…messages，newMessage]）
更改为
setMessages（currentMsgs=>[…currentMsgs，newMessage]）
如果在
useffect
钩子的依赖项数组中添加
消息
，您的代码将陷入状态更新和重新渲染的无限循环中。要避免在依赖项数组中添加
消息
，请将
setMessages（[…messages，newMessage]）
更改为
setMessages（currentMsgs=>[…currentMsgs，newmessages]）
外部依赖项为
消息
setMessage
不会有问题，因为它保证是稳定的。实际上，复制了错误的变量名。外部依赖项是
messages
setMessage
不会有问题，因为它保证是稳定的。实际上，复制了错误的变量名。