Slack克隆应用：点击发送按钮时消息区无法滚动到底部

Hey Kyle, let's dig into why your send button isn't triggering the auto-scroll while Enter key and channel reloads work perfectly. Here's what's likely going on and how to fix it:

What's Causing the Issue? #

The componentDidUpdate hook runs when your component's state or props change, but there are two key gaps with your current setup:

1. When you click the send button (which lives in the child MessageForm component), the parent component's messages state might not be updating in a way that reliably triggers componentDidUpdate before the scroll should happen.
2. setState is asynchronous—so when you clear the message input in your sendMessage method, the component might not have finished re-rendering the new message before componentDidUpdate fires (or fires too early).

Step-by-Step Fixes #

1. Force Scroll to Happen Right After State Updates

Update your sendMessage method to call scrollToBottom directly in the setState callback. This ensures the scroll only runs after the component has fully updated its state and re-rendered the new message:

sendMessage = () => {
  const { getMessagesRef } = this.props;
  const { message, channel, user, typingRef } = this.state;
  if(message) {
    this.setState({loading: true});
    getMessagesRef()
      .child(channel.id)
      .push()
      .set(this.createMessage())
      .then(()=> {
        // Use setState's callback to run scroll AFTER state updates
        this.setState({
          loading: false, 
          message: '', 
          errors: [] 
        }, () => {
          this.scrollToBottom(); // Scroll happens here, guaranteed after re-render
        });
        typingRef
          .child(channel.id)
          .child(user.uid)
          .remove()
      })
      .catch(err => {
        console.error(err);
        this.setState({ 
          loading: false, 
          errors: [...this.state.errors, err ] 
        })
      })
  }else{
    this.setState({ errors: [...this.state.errors, {message: "Add a message"}] })
  }
}

2. Optimize componentDidUpdate to Only Scroll When Needed

To avoid unnecessary scrolls (like when typing status updates change), modify componentDidUpdate to only trigger scroll if the messages state has actually changed:

componentDidUpdate(prevProps, prevState) {
  // Only scroll if messages list has been updated
  if (prevState.messages !== this.state.messages) {
    this.scrollToBottom();
  }
}

3. Verify MessageForm is Calling the Parent's sendMessage

Double-check that your MessageForm component's send button is invoking the parent's sendMessage method (passed via props). If the child has its own independent send logic, the parent's messages state won't update, and componentDidUpdate will never fire:

// Inside MessageForm.js
<button onClick={this.props.sendMessage} disabled={loading}>
  Send
</button>

Why This Works #

• The setState callback ensures we wait until the new message is added to the state and the component has re-rendered before scrolling.
• The optimized componentDidUpdate prevents false triggers from unrelated state changes (like typing indicators).
• Ensuring the child component uses the parent's send method keeps the state flow consistent, so the parent always knows when a new message is added.

Give these changes a try—this should make the send button trigger the smooth scroll just like the Enter key does!

内容的提问来源于stack exchange，提问作者Kyle