React Hook useEffect 缺少依賴“消息”

Question

我第一次嘗試使用 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;

這是控制台 output：

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.

我正在嘗試使用在線視頻教程構建此應用程序，但這是我遇到的問題。 如何解決這個問題？

Answer 1

因為您在useEffect中使用 state messages 。 您只需在調用setMessages時使用 function 來更新 state ，如下所示：

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

Answer 2

當前現有的答案都沒有解釋為什么這是必要的。

useEffect掛鈎可以在 3 種情況下運行：

• 每次渲染組件時都會運行useEffect(fn)
• useEffect(fn, [])在組件第一次掛載時運行
• useEffect(fn, [var1, var2])最初運行，然后任何時候var1或var2更改。

您收到警告的原因是 linter 檢測到您在 function 中使用了外部依賴項（ messages ），但是它沒有被列為顯式依賴項。 因此，如果要更改messages ，則useEffect將具有過時的版本，並且可能會導致錯誤。