WebソケットとReactJを使用して各ファイルの内容をストリームする

Question

ディレクトリのファイルを読み込もうとしています。ソケットを使用しています。ファイル名とファイルデータをReactを使用してレンダリングする必要があります。ここ

は私がやっていることです：

サーバー：

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); 

    } 

クライアント： 親コンポーネント：

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') 
); 

クライアント：子コンポーネント

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>); 
     } 

map.Butを使用してデータとファイル名とファイルデータを表示したい場合は、子コンポーネントで受信したデータを格納しています。配列の長さはゼロです。ここでは

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] 

なぜ3番目のコンソールの長さがゼロであるかを表示する理由

Answer 1

あなたはthis.state.data.push(msg);

var data = this.state.data; 
data.push(msg); 
this.setState({data: data});