如何在反应中循环更新数组

Question

我正在尝试使用React.js 练习socket.io，因此我尝试在两个客户端之间发送消息，但是我在显示消息时遇到了困难。我想显示过去发送的消息。现在我正在考虑将它作为一个数组来做，因为一个状态不起作用。当控制台记录数组时，它会显示在控制台中，但永远不会呈现出来

import { useEffect, useState } from "react";
import io from "socket.io-client";
import "./App.css";

let socket;
const CONNECTION_PORT = "localhost:3001/";

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [room, setRoom] = useState("");
  const [userName, setUserName] = useState("");
  const [message, setMessage] = useState("");
  var itemArray = [];

  useEffect(() => {
    //connect to the socket
    socket = io(CONNECTION_PORT);

    socket.on("receive-message", (data) => {
      itemArray.push(data);
      console.log("Pong");
      console.log(itemArray);
    });

    //receiving messages
    socket.on("authentication", (bool) => {
      if (bool === true) {
        setLoggedIn(true);
      }
    });
  }, [CONNECTION_PORT]);

  //Sending a request to join the room
  const connectToRoom = () => {
    socket.emit("join-room", room, userName);
  };

  const sendMessage = () => {
    socket.emit("send-message", message);
  };

  return (
    <div className="App">
      {!loggedIn ? (
        <div className="login">
          <input
            type="text"
            placeholder="Name..."
            onChange={(e) => {
              setUserName(e.target.value);
            }}
          />
          <input
            type="text"
            placeholder="Room..."
            onChange={(e) => {
              setRoom(e.target.value);
            }}
          />
          <button onClick={connectToRoom}> Enter Chat</button>
        </div>
      ) : (
        <div>
          <input
            type="text"
            placeholder="Send Message..."
            onChange={(e) => {
              setMessage(e.target.value);
            }}
          />
          <button onClick={sendMessage}>Send Message</button>
          <div>
            {itemArray.map((data) => {
              console.log(data);
            })}
          </div>
        </div>
      )}
    </div>
  );
}
export default App;

Answer 1

数组正在更新，但没有什么可以告诉 React 渲染更新。任何这些更改都会导致组件再次呈现：

1. 道具更新
2. 状态更新
3. Context 值变化

React DOM 将元素及其子元素与前一个元素进行比较，并且仅应用必要的 DOM 更新以使 DOM 达到所需状态。

您正在更新组件中的数组变量，但这不会触发渲染。将数组移入状态：

const [messages, setMessages] = useState([]);
...
useEffect(() => {
    ...
    socket.on("receive-message", (data) => {
      // update the state which triggers a render
      setMessages(prevState => [...prevState, data]);
    });

}, [CONNECTION_PORT]);

Answer 2

需要返回数据才能看到 Map 返回您遍历的每个值，因此您必须确保说您想查看列表中的数据 请务必这样返回

内部地图功能

{itemArray.map((data) => {
              return<li>{data.propertyName}</li>
            })}

这里的属性可以是对象属性的任何东西