Javascript 无法将JSON对象从SocketIO填充到前端React表中

我已通过socketIO成功连接到节点后端服务器。数据通过前端传输，目前可以在控制台中显示为JSON对象数组。我现在无法将数据填充到表中。欢迎任何建议

import React from 'react';
import socketIO from 'socket.io-client';
import Table from 'react-bootstrap/Table';
import Container from 'react-bootstrap/Container';

class Updates extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSocket: {},
        };
    }

    componentDidMount() {
        var socket = socketIO('http://127.0.0.1:5007');
        socket.on('chat message', function (dataSocket) {
            console.log(dataSocket)
            console.log(typeof dataSocket) // displays "object"
        });
    }


    render() {
        const { dataSocket } = this.state;
        const data = dataSocket.cc || [];
        return (
            <Container>
            <h1>Snowdon Updates</h1>
                <Table striped bordered hover variant="dark">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Device</th> 
                            <th>DeviceName</th>
                            <th>Input</th>
                        </tr>
                    </thead>
                    <tbody>
                    {data.map(dataTable => (
                        <tr>
                        <td>{dataTable.ID}</td> <td>{dataTable.Device}</td> 
                        <td>{dataTable.DeviceName}</td> <td>{dataTable.Input}</td>
                        </tr>
                        ))}
                    </tbody>
                </Table>
            </Container>
         );
     } 
}

export default Updates;

更新后端节点Js代码

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var amqp = require('amqplib/callback_api');
var port = process.env.PORT || 5007;

amqp.connect('amqp://dell-docker', function(error0, connection) {
    if (error0) {
        throw error0;
    }
connection.createChannel(function(error1, channel) {
    if (error1) {
        throw error1;
    }
    var exchange = 'states';
    channel.assertExchange(exchange, 'fanout', {
        durable: false
    });
    channel.assertQueue('', {
        exclusive: true 
    }, 
    function(error2, q) {
        if (error2) {
            throw error2;
        }
        console.log(" [*] Waiting for messages in %s. To exit press CTRL+C", q.queue);
        channel.bindQueue(q.queue, exchange, '');

        channel.consume(q.queue, function(msg) {
            if(msg.content) {
                var dataParse = JSON.parse(msg.content.toString()) 
                console.log(dataParse);
                io.emit('chat message', dataParse);  
            }
            }, 
        {
            noAck: true
        });
    });
})
});



http.listen(port, function(){
  console.log('listening on *:' + port);
});

---

您是否尝试使用数据更新状态

this.setState({ data: dataSocket });

试试这个

JSON.parse(dataSocket);

---

我看不到你在更新状态，即setState（…）刚刚更新了我的代码。仍然不能工作socket.on（“message”，dataSocket=>this.setState（{data:dataSocket}））；您的状态属性名称是

dataSocket

not

data

，例如

setState（{dataSocket:dataSocket}）

如果

console.log（dataSocket）

在消息回调中没有显示任何内容，则您没有发送正确编辑的数据，仍然无法工作

socket.on（“message”，data=>this.setState({dataSocket:data}）；

刚刚更新了我的代码。socket.on（“message”，dataSocket=>this.setState（{data:dataSocket}））；您可以在日志记录时添加dataSocket输出吗？它必须是一个数组，以设置它在控制台中显示为

对象{ID:2，设备：1，设备名称：“设备1”的状态，输入：2，输入名称：“输入2”，输入状态：0，打开短语：“打开”，关闭短语：“关闭”，时间：“2019-11-08T11:10:50.895852+00:00”}

然而，我从后端将其转换为数组，但仍然无法在表上获得任何输出。您应该添加一个解释，说明这解决了OP问题的原因。欢迎使用堆栈溢出！虽然您的答案可能会解决此问题，但如果您能解释它如何以及为什么解决此问题，则会很有帮助。此外，请记住您如果您提供高质量的答案，这将有助于任何未来的访问者了解这个问题，而这反过来可能会导致投票率上升。我鼓励您编辑您的答案，并添加解释，说明它如何以及为什么解决这个问题。

JSON.parse(dataSocket);