问题描述
我第一次尝试使用 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
的版本将过时,并且可能会导致错误。