控制台日志卡在无限循环中。

Question

我正在使用reason开发一个聊天应用程序，但由于某种原因，我的应用程序中的每个console.log都会被困在一个循环中，并将大量日志发送到控制台。我有点特别困惑，因为我正在为这个应用程序做一个视频教程，并且已经非常完美地跟踪了到目前为止的一切(因为我只有10分钟)。

以下是我的应用程序组件：

​

import { ChatEngine } from 'react-chat-engine';

import ChatFeed from './components/ChatFeed';

import './App.css';

const App = () => {
  return (
    <ChatEngine
      height='100vh'
      projectID='70565141-7ecc-48ba-8cf4-684117eff882'
      userName='Jay'
      userSecret='123123'
      renderChatFeed={(chatAppProps) => <ChatFeed {...chatAppProps} />}
    />
  );
};

export default App;

​

下面是我的ChatFeed组件：

​

import MessageForm from './MessageForm';
import MyMessage from './MyMessage';
import TheirMessage from './TheirMessage';

const ChatFeed = (props) => {
  const { chats, activeChat, userName, messages } = props;

  const chat = chats && chats[activeChat];

  const renderMessages = () => {
    const keys = Object.keys(messages);

    console.log(keys);
  };

  renderMessages();

  return <div>Chat feed</div>;
};

export default ChatFeed;

​

我假设这与我的组件被呈现有关，每次呈现时都会不停地记录，但我不知道如何解决这个问题。它不会导致程序运行中的任何问题，但是如果我不能修复这个问题，调试将会非常困难和烦人。

Answer 1

这是因为组件一直在重新复制..。你需要把它放在useEffect钩子里。

import { useEffect } from 'react';
import MessageForm from './MessageForm';
import MyMessage from './MyMessage';
import TheirMessage from './TheirMessage';

const ChatFeed = (props) => {
  const { chats, activeChat, userName, messages } = props;

  const chat = chats && chats[activeChat];

  useEffect(() => {
     const renderMessages = () => {
         const keys = Object.keys(messages);

         console.log(keys);
     };

     renderMessages();
  }, [messages]);

  return <div>Chat feed</div>;
};
export default ChatFeed;