如果我们在 componentDidMount 中调用回调函数,如何将 useEffect 替换为 componentDidMount?
How to replace useEffect with componentDidMount if we call a callback function inside componentDidMount?
通过使用 useEffect,我的数组状态变量没有附加以前的值,但是 componentDidMount 附加了
我console.log在使用useEffect时输出了消息,并且所有消息都被正确打印出来,但是状态没有被存储,如果我将消息状态变量设置为useEffect的依赖项,它进入无限循环
// with useEffect hook
function App() {
const [messages, setMessages] = useState([]);
useEffect(() => {
const chatManager = new ChatManager({
instanceLocator: instanceLocator,
userId: 'Henry',
tokenProvider: new TokenProvider({
url: tokenUrl
})
});
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
console.log([...messages]);
setMessages([...messages, message]);
}
}
})
}).catch(err => {
console.log('Error on connection', err)
})
}, [])
return (
<div className="app">
<RoomList />
<MessageList messages={messages}/>
<SendMessageForm />
<NewRoomForm />
</div>
);
}
export default App;
// with componentDidMount
class App extends React.Component {
constructor() {
super()
this.state = {
messages: []
}
}
componentDidMount() {
const chatManager = new ChatManager({
instanceLocator,
userId: 'Henry',
tokenProvider: new TokenProvider({
url: tokenUrl
})
})
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
this.setState({
messages: [...this.state.messages, message]
})
}
}
})
})
}
render() {
return (
<div className="app">
<RoomList />
<MessageList messages={this.state.messages} />
<SendMessageForm />
<NewRoomForm />
</div>
);
}
}
export default App
我希望使用 useEffect 的结果与 componentDidMount 相同,它散列了消息状态数组变量中的所有消息,但是通过使用 useEffect,我可以控制所有消息,但是消息状态数组变量是空的,所以最后的结果只是最新消息。
由于您的状态取决于当前状态值,因此您需要使用 setMessages
的函数形式。这意味着您不需要将 messages
作为依赖项包含在内(因为它实际上不会成为依赖项):
useEffect(() => {
...
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
setMessages(prevMessages => [...prevMessages, message]);
}
}
})
})
}, [])
有关更多信息,请参阅 React 文档:
https://reactjs.org/docs/hooks-reference.html#functional-updates
通过使用 useEffect,我的数组状态变量没有附加以前的值,但是 componentDidMount 附加了
我console.log在使用useEffect时输出了消息,并且所有消息都被正确打印出来,但是状态没有被存储,如果我将消息状态变量设置为useEffect的依赖项,它进入无限循环
// with useEffect hook
function App() {
const [messages, setMessages] = useState([]);
useEffect(() => {
const chatManager = new ChatManager({
instanceLocator: instanceLocator,
userId: 'Henry',
tokenProvider: new TokenProvider({
url: tokenUrl
})
});
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
console.log([...messages]);
setMessages([...messages, message]);
}
}
})
}).catch(err => {
console.log('Error on connection', err)
})
}, [])
return (
<div className="app">
<RoomList />
<MessageList messages={messages}/>
<SendMessageForm />
<NewRoomForm />
</div>
);
}
export default App;
// with componentDidMount
class App extends React.Component {
constructor() {
super()
this.state = {
messages: []
}
}
componentDidMount() {
const chatManager = new ChatManager({
instanceLocator,
userId: 'Henry',
tokenProvider: new TokenProvider({
url: tokenUrl
})
})
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
this.setState({
messages: [...this.state.messages, message]
})
}
}
})
})
}
render() {
return (
<div className="app">
<RoomList />
<MessageList messages={this.state.messages} />
<SendMessageForm />
<NewRoomForm />
</div>
);
}
}
export default App
我希望使用 useEffect 的结果与 componentDidMount 相同,它散列了消息状态数组变量中的所有消息,但是通过使用 useEffect,我可以控制所有消息,但是消息状态数组变量是空的,所以最后的结果只是最新消息。
由于您的状态取决于当前状态值,因此您需要使用 setMessages
的函数形式。这意味着您不需要将 messages
作为依赖项包含在内(因为它实际上不会成为依赖项):
useEffect(() => {
...
chatManager.connect()
.then(currentUser => {
currentUser.subscribeToRoomMultipart({
roomId: '7b7a1d23-e869-4c19-8eab-e88d5144dd72',
hooks: {
onMessage: message => {
setMessages(prevMessages => [...prevMessages, message]);
}
}
})
})
}, [])
有关更多信息,请参阅 React 文档: https://reactjs.org/docs/hooks-reference.html#functional-updates