useEffect 滚动到底部不起作用

Question

所以这是我的代码，测试聊天机器人。 刷新时 useEffect 不起作用，接收或发送新消息时自动滚动不起作用。我错过了什么？

import './App.css';
import './normal.css';
import { useState, useRef, useEffect } from 'react';

function App() {

  const messagesEndRef = useRef(null);
  const [input, setInput] = useState("");
  const [chatLog, setChatLog] = useState([{
    user: "gpt",
    message: "Hello World"
  }])

  function clearChat(){
    setChatLog([]);
  }

useEffect(() => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
  }, [chatLog]);

  async function handleSubmit(e){
    e.preventDefault();
    let chatLogNew = [...chatLog, { user: "me", message: `${input}` } ]
    await setInput("");
    setChatLog(chatLogNew)

    const messages = chatLogNew.map((message) => message.message).join("\n")

    const response = await fetch("http://localhost:3080/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        message: messages
      })
    });
    const data = await response.json();
    setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`}])

  }

  return (
    <div className="App">
      <aside className ="sidemenu">
        <div className="title">
            <h1>Title</h1>
        </div>
        <div className="side-menu-button" onClick={clearChat}>
          <span>+</span>
          New chat
        </div>
      </aside>
      <section className="chatbox">
        <div className="chat-log">
          {chatLog.map((message, index) => (
            <ChatMessage key={index} message={message} />
          ))}
        </div>
        <div ref={messagesEndRef} />
        <div className="chat-input-holder">
            <form onSubmit={handleSubmit}>
              <input 
              rows="1"
              value={input}
              onChange={(e)=> setInput(e.target.value)}
              className="chat-input-textarea">
              </input>
            </form>
        </div>
      </section>
    </div>
  );
}

const ChatMessage = ({ message }) => {
  return (
    <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
            <div className="chat-message-center">
            <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>

              {message.user === "gpt" && "AI"}

              {message.user === "me" && "Me"}
              
              </div>
              <div className="message">
                {message.message}
              </div>
            </div>
          </div>
  )
}

export default App;

定义 messagesEndRef 并插入 useEffect 并将虚拟 div 放入最后呈现的消息。

有任何想法吗？ 我格式化错了吗？

Answer 1

不要在 useEffect() 的第二个参数数组中使用 chatLog，而是使用 [JSON.stringify(chatLog)] 或 chatLog.length

useEffect(() => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
  }, [JSON.stringify(chatLog)]);

Answer 2

scrollIntoViewOptions 是：

行为（可选）

定义过渡 animation。自动或平滑之一。 默认为自动。

块（可选）

定义垂直 alignment。开始、中心、结束或最近的其中之一。 默认开始。

内联（可选）

定义水平 alignment。开始、中心、结束或最近之一。 默认为最近。

所以，你需要添加块选项来结束。

useEffect(() => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: "end" })
  }, [chatLog]);