react FileReader讀取TXT文件並保存 split切割字符串 map()分別渲染切割后的數組內的所有字符串

//class

my_fileReader( e ) {

        console.log(e.target.files[0]);

        const reader = new FileReader();

        // 用readAsText讀取TXT文件內容

        reader.readAsText(e.target.files[0]);

        reader.onload = function (e) {

            console.log(e.target.result); 　　 //讀取結果保存在字符串中

            let my_str = e.target.result;　　　　//直接保存全部數據為一個字符串

            let my_arr = my_str.split(/[\s\n]/); 　　//按空格和換行符切割字符串，並保存在數組中

 

            this.setState({

                previewPic: e.target.result,

                arr : my_arr

            });

        }.bind(this);

 

    };

 

//render 

<input type="file" className="file" onChange={this.my_fileReader} />

<div> {this.state.previewPic} </div>

{arr  && arr.map((item, index )=>(

                        <div key = {`key${index}`} >

                                {item}

                        </div>

                    )

 )}