请教各位大佬们， react 数组渲染问题？

Question

流程：

当点击某个用户的时候，就拉取与当前用户的会话数据并渲染出来

我尝试当点击某个用户的时候，先将数组置空， setSessionList([]);

问题：

const [sessionList, setSessionList] = useState([]);

第一次点击拉取到用户数据并通过setSessionList出来后，再点击用户，拉取到的数据会全部被放到一起显示出来，setSessionList([]) 这一步操作并未起到任何作用

求教各位朋友，这个情况如何解决？

代码：

结果

数组置空， setSessionList([]) 这一步没有什么作用

补充

需求就是点击左边不同的用户，右边显示与当前用户的会话数据列表

现在的问题是，我点击多个用户后，显示的是这多个用户所有的会话数据列表，而我只需要显示当前被点击的这个用户的会话数据列表

比如： 与A用户的会话数据是 [{id:1}, {id:2}]

与B用户的会话数据是 [{id:3}, {id:4}]

当我依次点击A B后， 拿到的数据是 [{id:1}, {id:2}, {id:3}, {id:4}]

而正常情况下，最后点击的是B用户，拿到的数据应该是 [{id:3}, {id:4}]

Answer 1

前端demo

function App() {
  const [socket, setSocket] = useState(null);
  const [message, setMessage] = useState([]);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const ws = new WebSocket("ws://localhost:10090/");
    setSocket(ws);

    ws.onopen = () => {
      setConnected(true);
      ws.send('Jack')
    };

    ws.onclose = () => {
      setConnected(false);
    };

    ws.onmessage = (event) => {
      setMessage(prevMessage => [...prevMessage, event.data]);
    };

    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, []);

  const sendMessage = () => {
    setMessage([])
    if (socket && connected) {
      socket.send('Lucy');
    }
  };

  return (
    <div>
      <button onClick={sendMessage}>发送消息</button>
      <div>消息:</div>
      {
        message.map((item,index)=><div key={index}>{item}</div>)
      }
    </div>
  );
}

后端demo

var ws = require("nodejs-websocket")

let id = ''
let server = ws.createServer(connect => {
    connect.on("text", data => {
        id = data
    })

    setInterval(()=>{
        connect.send(`${id}-${new Date().getTime()}`)
    },1000)

    //监听websocket断开链接
    connect.on("close", () => {
        console.log("websocket连接断开....")
    })

    //监听websocket异常信息
    connect.on("error", () => {
        console.log("websocket连接异常....")
    })
})

server.listen(10090, () => {
    console.log("websocket running")
})