Question

   onReaderLoad = (e) => {
    var obj =JSON.parse(e.target.result)
    this.setState(prevState => ({
      datasource: [...prevState.datasource, obj]
    }))
  }

  ReadFiles = () => {
    let files = this.state.json_files;

    for (let i of files){
      var reader = new FileReader();
      reader.onload = this.onReaderLoad;
      reader.readAsText(i);
    }

    console.log(this.state.datasource)

  }


  getfolder = (e) => {
    var files = e.target.files;
    this.setState({
      json_files: files
    }, () => this.ReadFiles())    
  }


                  <input type="file" onChange={this.getfolder} multiple accept=".json" />

我在这里共享我的代码。

我想要做的是我正在从用户输入中读取所有 json 文件，并将它们循环并存储为反应状态。然后在 ReadFiles（）函数中，我正在记录状态数据。但这总是空数据。

我认为它先调用然后进入循环。

所有循环操作完成后，我想从 ReadFiles（）函数内部的状态记录数据源数据

有什么办法吗？

请看看

Answer 1

在这种情况下，您可以使用instance variable来跟踪是否正在处理最后一个文件。知道最后一个文件正在处理后，您可以从最后处理的文件的回调中将doNextStep中的true设置为state。然后在componentDidUpdate中，可以进行下一步（即console log or anything else）。

class Example extends React.Component {
   constructor(props){
    super(props);
    // to keep track of if last file is being processed
    this.lastFile = false;
    
    // doNextStep will tell us that all setState operations are completed or not
    this.state = {
      doNextStep: false,
    }
    }
    
    componentDidUpdate(prevProps, prevState) {
      if(prevState.doNextStep !== this.state.doNextStep && this.state.doNextStep) {
      console.log(this.state.datasource)
      }
    }
    
         
   onReaderLoad = (e) => {
  var obj =JSON.parse(e.target.result)
  this.setState(prevState => ({
    datasource: [...prevState.datasource, obj]
  }), 
  () => if(this.lastFile)) this.setState({doNextStep: true}))
  }
    
  ReadFiles = () => {
    let files = this.state.json_files;

    for (i=0; i<files.length; i++){
      if(i == files.length - 1) this.lastFile = true
      else this.lastFile = false
      
      var reader = new FileReader();
      reader.onload = this.onReaderLoad;
      reader.readAsText(i);
      
    }
  }
        }

操作完成之前的React.js日志记录

1 个答案: