时间戳

首页 > 解决方案 > React Hook useEffect 缺少依赖“消息”

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;

这是控制台输出：

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.

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

标签： javascriptreactjswebhooksmern

解决方案

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

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

推荐阅读