react map遍历重复渲染问题

[Haou2020]

使用socket.io从server发送到client显示
使用echarts-for-react绘制折现统计图
要求是：用map遍历生成6个charts，使sensordata里的6个数据分开显示在6个图上
问题是：6个charts生成了（这里我只测试第一个charts），在map遍历里已经使用item（sensordata单个数据）当作props传入，但是每次图上都会把整个sensordata打印出来，怎么把6个数据分开到6张图上？



代码如下 ：

test.js

import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';
import TestComp from './testcomponent';

var io = require('socket.io-client');
var socket = io.connect('http://localhost',{'forceNew':true});

export default class Test extends Component{
    constructor(props){
        super(props);
        this.state={
            sensorData:[0,0,0,0,0,0],
            count:0
        }
    }

    componentDidMount(){
        socket.on('sensordata_server', function (data) {
            this.setState({
                sensorData:[data.temp,data.humi,data.ch2o,data.co2,data.pm2d5,data.voc],
                count:this.state.count+1
            })
        }.bind(this));
    }

    render(){
        return(
            <div>
                {this.state.sensorData.map(function(item,index){
                    console.log(item);
                    return(
                        <TestComp sensorData={item} count={this.state.count} key={index} index={index}/>
                    )
                }.bind(this))}
            </div>
        )
    }
}

testcomponent.js

import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';

var xAxisData = [];
var seriesData = [];

export default class TestComp extends Component{
    constructor(props){
        super(props);
        this.state={
            sensorData:props.sensorData,
            count:props.count
        }
    }

    render(){
        return(
            <li className="col-md-4">
                <ReactEcharts 
                    option={this.Option()}
                    notMerge={true}
                    lazyUpdate={true}
                    onChartReady={this.onChartReadyCallback}
                />
            </li>
        )
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            sensorData:nextProps.sensorData,
            count:nextProps.count
        });
    }

    Option(){
        let temp_option = {
            title:{
                text:'温度曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['温度']
            },
            xAxis:{
                data: (function (){
                    xAxisData.push(this.state.count);
                    return xAxisData;
                }.bind(this))()
            },
            yAxis: {},
            series:{
                name:'温度',
                type:'line',
                data:(function (){
                    seriesData.push(this.state.sensorData);
                    return seriesData;
                }.bind(this))()
            }
        }

        let humi_option = {
            title:{
                text:'湿度曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['湿度']
            },
            xAxis:{
                data:['1','2','3','4','5','6','7','8','9','10']
            },
            yAxis: {},
            series:{
                name:'湿度',
                type:'line',
                data:[5, 20, 36, 10, 10, 20, 100, 30, 47, 58]
            }
        }

        let ch2o_option = {
            title:{
                text:'甲醛曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['甲醛']
            },
            xAxis:{
                data:['1','2','3','4','5','6','7','8','9','10']
            },
            yAxis: {},
            series:{
                name:'甲醛',
                type:'line',
                data: [5, 20, 36, 10, 10, 20, 100, 30, 47, 58]
            }
        }

        let co2_option = {
            title:{
                text:'CO2曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['CO2']
            },
            xAxis:{
                data:['1','2','3','4','5','6','7','8','9','10']
            },
            yAxis: {},
            series:{
                name:'CO2',
                type:'line',
                data: [5, 20, 36, 10, 10, 20, 100, 30, 47, 58]
            }
        }

        let pm2d5_option = {
            title:{
                text:'PM2.5曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['PM2.5']
            },
            xAxis:{
                data:['1','2','3','4','5','6','7','8','9','10']
            },
            yAxis: {},
            series:{
                name:'PM2.5',
                type:'line',
                data: [5, 20, 36, 10, 10, 20, 100, 30, 47, 58]
            }
        }

        let voc_option = {
            title:{
                text:'VOC曲线'
            },
            tooltip:{
               
            },
            legend: {
                data:['VOC']
            },
            xAxis:{
                data:['1','2','3','4','5','6','7','8','9','10']
            },
            yAxis: {},
            series:{
                name:'VOC',
                type:'line',
                data: [5, 20, 36, 10, 10, 20, 100, 30, 47, 58]
            }
        }
        
        switch(this.props.index){
            case 0 : return temp_option;
            case 1 : return humi_option;
            case 2 : return ch2o_option;
            case 3 : return co2_option;
            case 4 : return pm2d5_option;
            case 5 : return voc_option;
        }
    }
}

[Haou2020]

[functionsub]

xAxisData.push(this.state.count);
return xAxisData;

改成：

xAxisData[this.props.index] = xAxisData[this.props.index] || [];
xAxisData[this.props.index].push(this.state.count);
return xAxisData[this.props.index];

seriesData.push(this.state.sensorData);
return seriesData;

改成：

seriesData[this.props.index] = seriesData[this.props.index] || [];
seriesData[this.props.index].push(this.state.sensorData);
return seriesData[this.props.index];

试试。

[Haou2020]

引用 1 楼 functionsub 的回复:

大佬，确实有用！ 不知道这样的原理是什么，我这种写法好不好？ 还有就是后面的几个图用这种形式该怎么处理？

[Haou2020]

引用 1 楼 functionsub 的回复:

大佬，确实有用！ 我想问问这样做的原理是什么，我这种写法好不好？ 还有就是 我后面的几个图表用这种形式该怎么处理？

[functionsub]

你把所有新创建的组件的数据都保存在外面那个总的变量里了。 引入的模块只会是你那个模块里export的内容，其他变量相当于是所有通过新建出来的组件的公共数据。

[chenjinaban]

楼主请教socket.io，我这一直有问题