javascript - react - socket io stream

Streame den Inhalt jeder Datei mit Hilfe von Web Sockets und ReactJs (1)

Ich versuche, Dateien eines Verzeichnisses und Usin-Sockets zu lesen Ich muss den Dateinamen und die Dateidaten mit React rendern.

hier ist was ich getan habe:

Server:

var files = fs.readdirSync(currentPath);
   for (var i in files) {

        (function(j){

      var currentFile = currentPath + '/' + files[j];
      var fileName = files[j];
      var stats = fs.statSync(currentFile);

      if (stats.isFile()) {
           fs.readFile(currentFile, function (err, data) {

                if (err)
                    throw err;
                if (data){
                    var fileAndData=currentFile+" "+data.toString('utf8')
                    io.emit('file data',fileAndData);


           console.log("file name and file data ***",currentFile+data.toString('utf8'));
                }

            });
           }
     else if (stats.isDirectory()) {
            traverseFileSystem(currentFile);
          }
    }
     )( i );

     }

Client: Elternkomponente:

class FileData extends Component{
  constructor(props) {
      super(props);
      this.state = {
       filedata:null,
       filename:null,
       data:[]
      }
   }
componentDidMount() {
    socket.on('file data', function(msg){
    this.state.data.push(msg);
    // this.setState({filename:msg})

  }.bind(this));    
}

render(){

return(<div>
    <DataCard data={this.state.data}/>
    </div>);

}
}

ReactDOM.render(
    <FileData/>,document.getElementById('messages')
);

Client: Kindkomponente

constructor(props) {
            super(props);
            this.state={data:this.props.data}
        }

        render(){
            console.log("array",Array.isArray(this.state.data))
            console.log("array length",this.state.data.length)
            console.log("array is ==>",this.state.data)


            return(
                <MuiThemeProvider>

                  </MuiThemeProvider>);
        }

Ich möchte die Daten und den Dateinamen und die Dateidaten mit map anzeigen. Aber wenn ich die Daten, die in der untergeordneten Komponente empfangen werden, trösten, ist die Array-Länge Null. Hier ist das

console result : 
array true
array length 0
array is ==> Array[0]0: "/vagrant/assignment/server/data//file 1.txt hello from file 1."1: "/vagrant/assignment/server/data//file 2.txt hello from file 2."length: 2__proto__: Array[0]

Warum zeigt die dritte Konsole 2 Daten, wenn ihre Länge Null ist.