使用 Web 套接字和 ReactJs 流式传输每个文件的内容

Posted 2023-03-07

【中文标题】使用 Web 套接字和 ReactJs 流式传输每个文件的内容

【英文标题】：Stream the contents of each file using web sockets and ReactJs

【发布时间】：2017-03-19 17:25:17

【问题描述】：

我正在尝试读取目录的文件并使用套接字我必须使用 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 显示数据和文件名和文件数据。但是当我在安慰子组件中收到的数据时，数组长度为零。这里是

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]

如果长度为零，为什么第三个控制台显示 2 个数据。

【参考方案1】：

你不能通过 this.state.data.push(msg); 改变状态

试试

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

【讨论】：

谢谢squall3d，错误是因为render() return( );这里数据以异步方式传入，因此应该检查 this.state.data.length==this.state.totalfile&&this.state.data.length>0?：