数组不会在 React 中打印其值答案

【问题标题】：The array doesnt print its values in React数组不会在 React 中打印其值
【发布时间】：2022-09-27 20:15:06
【问题描述】：

我正在尝试制作一个套接字 io 简单的聊天应用程序，并且连接工作正常。问题来自 const renderChat。如果我放置静态文本，console.log 也会被读取并正确打印（文本框中的值），它也会显示在前端，但是，由于某种原因它不会打印

{msg.data[\"message\"]}

它必须打印数组中的每个值。此外，我几乎可以肯定数组每次都被清空并且 useEffect 不能正常工作，但我还不能真正测试它。如果我能解决这两个问题，我会很高兴！

import \'./App.css\';
import io from \'socket.io-client\'
import { useEffect, useState } from \'react\'
import React from \'react\';
import ReactDOM from \"react-dom/client\";


const socket = io.connect(\"http://localhost:3001\");

function App() {
  const [message, setMessage] = useState(\"\");
  const [chat, setChat] = useState([]);
  const sendMessage = () => {
    socket.emit(\"send_message\", { message });
  };

  const renderChat = () => {
    return (
      chat.forEach(msg => {
        <h3>{msg.data[\"message\"]}</h3>
        console.log(msg.data)
      })
    )
  }

  useEffect(() => {
    socket.on(\"receive_message\", (data) => {
      setChat([...chat, { data }])
    });
  }, [socket])
  return (
    <div className=\"App\">
      <input placeholder=\"Message...\" onChange={(event) => {
        setMessage(event.target.value);}}
        />
      <button onClick={sendMessage}>Send Message</button>
      <h1>Message:</h1>
      {renderChat()}
    </div>
  );
}

export default App;

标签： javascript reactjs jsx

【解决方案1】：

请使用map 而不是forEach

    const renderChat = () => {
    return (
      chat.map(msg => {
        <h3>{msg.data["message"]}</h3>
        console.log(msg.data)
      })
    )
  }

【讨论】：

【解决方案2】：

使用map 而不是forEach

map 实际上返回一个返回结果的数组。

另一方面，forEach 不返回任何内容。

const renderChat = () => {
    return (
      chat.map(msg => {
        <h3>{msg.data["message"]}</h3>
        console.log(msg.data)
      })
    )
  }

【讨论】：