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

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;

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

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;