javascript - 请教各位大佬们， 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")})