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.
Sie können den Status nicht this.state.data.push(msg);
indem Sie dies this.state.data.push(msg);
Versuchen
var data = this.state.data;
data.push(msg);
this.setState({data: data});