Reactjs useEffect socket.on重新命名useState时出现问题

我正在寻找一些使用socket.io-client的帮助。我在尝试从聊天服务器获取所有消息时遇到一些问题。我应该得到一个单独的信息，我需要推到一个状态。我不会在每封邮件上都重播。有没有办法处理和更新状态？谢谢

import React, {useState, useEffect} from 'react'
import {withRouter} from 'react-router-dom'
import Button from '../core/Button'
import Field from '../core/Field'
import Label from '../core/Label'
import {Container, ScrollContainer} from './StyledComponents'
import useLocalStorageState from '../../hooks/useLocalStorage'
import io from 'socket.io-client'
import {SOCKET_SERVER_CLIENT} from '../../utils/const'
import Profile from '../Profile/Profile'

let socket
const Chat = ({location}) => {
  const [listMessages, setListMessages] = useState([])
  const [message, setMessage] = useState('')

  useEffect(() => {
    const username = location.search.split('=')[1]
    socket = io(`${SOCKET_SERVER_CLIENT}/?username=${username}`)
    return () => {
      socket.disconnect()
    }
  }, [])

  useEffect(() => {
    socket.on('message', message => {
        const auxArr = listMessages
        auxArr.push(message)
        setListMessages(auxArr)
    })
  })

  return (
    <Container>
      {console.log('rerender')}
      <ScrollContainer>
        {listMessages &&
          listMessages.map(infoMessage => (
            <Profile key={infoMessage.time} {...infoMessage} />
          ))}
      </ScrollContainer>
    </Container>
  )
}

export default withRouter(Chat)

import React，{useState，useffect}来自“React”
从“react router dom”导入{withRouter}
从“../core/Button”导入按钮
从“../core/Field”导入字段
从“../core/Label”导入标签
从“./StyledComponents”导入{Container，ScrollContainer}
从“../../hooks/useLocalStorage”导入useLocalStorageState
从“socket.io客户端”导入io
从“../../utils/const”导入{SOCKET\u SERVER\u CLIENT}
从“../Profile/Profile”导入配置文件
插座
常量聊天=（{location}）=>{
常量[listMessages，setListMessages]=useState（[]）
const[message，setMessage]=useState（“”）
useffect（（）=>{
const username=location.search.split（'='）[1]
socket=io（`${socket\u SERVER\u CLIENT}/？username=${username}`）
return（）=>{
socket.disconnect（）
}
}, [])
useffect（（）=>{
socket.on（'message'，message=>{
const auxArr=listMessages
auxArr.push（消息）
setListMessages（auxArr）
})
})
返回(
{console.log（'rerender'）}
{listMessages&&
listMessages.map（infoMessage=>(
))}
)
}
使用路由器导出默认值（聊天）

这段代码将对旧数组进行变异，然后使用相同的数组设置状态。功能组件在设置状态时进行检查，以确保状态已更改。由于前后都是相同的数组，因此将跳过渲染

您需要复制状态，而不是改变状态：

const auxArr = [...listMessages];
auxArr.push(message);
setListMessages(auxArr);

由于您将新状态建立在旧状态的基础上，因此还应使用setting state的回调形式，以消除在多个set state几乎同时发生时可能发生的任何错误：

setListMessage(prevMessages => {
  const auxArr = [...prevMessages];
  auxArr.push(message);
  return auxArr;
})

---

您在

prevState

示例中出错。@k.s.谢谢，解决了这个问题，您可以省略创建新数组，直接在回调

setListMessages（prevState=>[…prevState，message]）中返回一个新数组。

setListMessage(prevMessages => {
  const auxArr = [...prevMessages];
  auxArr.push(message);
  return auxArr;
})