无法访问函数[重复]内部的状态变量

Question

我正在构建一个消息传递应用程序。我使用setTimeout每隔5秒从后端检索一次消息日志，并将其存储在一个状态变量中。我让它也滚动到聊天窗口的底部每次超时，但我试图使它只发生在有一个新的消息在响应对象。问题是我无法访问检索它的函数中的状态变量。理想情况下，我会将响应对象的长度与状态变量的当前长度进行比较，以确定是否存在新的响应。

这是我的代码：

  import React from "react"
  import axios from "axios"

  export default function Messaging(props) {

    const [messages, setMessages] = React.useState([])

    const getMessages = () => {

      const config = {
        method: "get",
        url: "localhost:3001/get-messages",
      }

      axios(config)
        .then((response) => {

         console.log(messages.length) // prints 0 in reference to the initial state value

          if (response.data.get.records.length !== messages.length) {
            // function to scroll to the bottom of the chat window
          }

          setMessages(response.data.get.records)
          setTimeout(getMessages, 5000)
          
     
        })
    }

    console.log(messages.length) // prints actual value correctly

    // Initial retrieval of chat log
    React.useEffect(() => {
      getMessages()
    }, [])
  }

在处理逻辑方面，我也愿意接受更好的建议。提前道谢！

Answer 1

setmessages将在下一次呈现中更新messages

考虑到这一点，您可以创建一种效果，即每当messages.length发生更改时，就会滚动到您的元素

  import React from "react"
  import axios from "axios"

  export default function Messaging(props) {

    const [messages, setMessages] = React.useState([])

    React.useEffect(() => {
      // store the id to clear it out if required
      let timeoutId

      const getMessages = () => {
        const config = {
          method: "get",
          url: "localhost:3001/get-messages",
        }
      
        axios(config)
          .then((response) => {
            // store the messages
            setMessages(response.data.get.records)
            // here we tell to poll every 5 seconds
            timeoutId = setTimeout(getMessages, 5000)
          })
      }

      getMessages()
      
      return () => {
        if (timeoutId) {
          clearTimeout(timeoutId)
        }
      }
    }, [setMessages])
    
    React.useEffect(() => {
      // code here to scroll
      // this would only trigger if the length of messages changes
    }, [messages.length])
  }

我还在您的第一个效果中添加了清理，因此当组件卸载时，您将清理timeout并且避免任何额外的请求