Socket.io接收的数据无法作为prop传递给React组件报错如何解决？

• 报错提示的堆栈定位存在误导，实际问题出在Main组件的渲染逻辑：React不支持直接将JS对象作为子元素渲染，你直接在JSX中写{this.props.responses}，而responses是包含{currencyPairName, prices}属性的对象数组，因此触发类型错误。
• 潜在问题：你的App组件中使用了useState、useEffect，但代码中没有从react包引入这两个API，也会引发运行时错误。

1. 修正App组件的引入与Socket清理 #

补充缺失的React API引入，添加Socket连接清理逻辑避免内存泄漏：

import { useState, useEffect } from 'react'
import socketIOClient from "socket.io-client";
import Main from "./Main";
const ENDPOINT = "http://127.0.0.1:4001";

function App() {
  const [response, setResponse] = useState([]);

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.on("tick", (data) => {
      // 如果tick返回的是全量数组直接赋值即可
      setResponse(data);
      // 如果tick返回的是单条数据需要累加，替换成下面的写法
      // setResponse(prevList => [...prevList, data])
    });
    // 组件卸载时断开Socket连接
    return () => socket.disconnect()
  }, []);

  console.log(response);
 
  return (
    <>
      <div style={{ textAlign: "center" }}>
        <Main responses={response} />
      </div>
    </>
  );
}

export default App;

2. 修正Main组件的列表渲染逻辑 #

遍历responses数组，取出对象的具体属性值再渲染，同时为列表项添加唯一key：

import React from 'react';
import './Main.css';

class Main extends React.Component {
  render() {
    const { responses } = this.props
    return (
      <div className="container">
        {/* 遍历对象数组渲染内容，有唯一业务ID的话优先用业务ID当key，不要用index */}
        {responses.map((item, index) => (
          <div key={index} className="placeholder">
            币种对：{item.currencyPairName}，价格：{item.prices}
          </div>
        ))}
        <div className="placeholder"></div>
        <div className="placeholder"></div>
      </div>
    );
  }
}

export default Main;

如果prices字段也是对象/数组类型，同样需要取出具体的字段值后再渲染，不能直接写{item.prices}。

内容的提问来源于stack exchange，提问作者gali gurevich