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

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

您需要 return 数据才能看到映射 returns 你遍历的每个值，你必须确保说你想在列表中看到数据请确保return这样

内部地图功能

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

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

Answer 2

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

道具更新
状态更新
Context 值变化

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

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

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

}, [CONNECTION_PORT]);

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

How to loop through an updating array in react

javascript

arrays

reactjs

rendering