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

Question

我正在使用 React 制作一个聊天应用程序，但由于某种原因，console.log我的应用程序中的每一个都陷入了一个循环，并向控制台发送了无穷无尽的日志。我有点特别困惑，因为我正在为这个应用程序做一个视频教程，并且到目前为止一切都很好（因为我只有大约十分钟）。

这是我的应用程序组件：

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;

我假设这与我的组件被渲染有关，并且每次渲染时都会无休止地记录，但我不知道如何解决这个问题。它不会导致程序运行出现任何问题，但如果我无法解决这个问题，调试将非常困难和烦人。

标签： reactjsreact-chat-engine

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;