tutorial socket react example javascript arrays node.js reactjs socket.io

javascript - example - Transmita los contenidos de cada archivo usando sockets web y ReactJs



socket javascript (1)

Estoy tratando de leer los archivos de un directorio y usar el socket tengo que renderizar el nombre del archivo y los datos del archivo usando React.

esto es lo que hice:

Servidor:

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

cliente: componente principal:

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

cliente: componente infantil

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

Quiero mostrar los datos y el nombre del archivo y los datos del archivo usando el mapa. Pero cuando estoy consolando los datos recibidos en el componente secundario, la longitud de la matriz es Cero. Aquí está el

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]

Por qué la 3ª consola muestra 2 datos si su longitud es cero.


No puede mutar el estado haciendo this.state.data.push(msg);

Tratar

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