Reactjs React setState componentDidUpdate React 在try 根据更新状态更新状态时限制 .. 的数量

我有一个react程序需要其他组件的数据.当父组件发送路径数据时，数组将获取文件夹中的所有文件名，我还需要计算数据长度，以确保文件列表不会为空.一些数据需要存储到状态，并将在下一个进程中重新使用.以下是节目.

  constructor() {
    super()

    this.state = {
      fulldir: null,
      listfileArray: [],
      isDataExist: true
    }
  }
  componentDidUpdate()
  {
    let path = this.props.retrievefilespath
    let dirLocation = Utils.fulldirFunc(path)
    let rdir = fs.readdirSync(dirLocation)
    let countList = 0
    rdir.forEach((filename) => {
        this.state.listfileArray.push({
                id: countList,
                name: filename,
                selected: false
            })
        countList++
    })
    if(countList > 0)
      this.setState({
        isDataExist: true
      })
  }

但是这个程序返回错误

超过最大更新深度时出错.当一个组件

之前我使用vuejs并使用数据来处理数据流

data () {
        return {
            listfile: [],
            isActive: false,
            isDataExist: false,
            arrayIdx: []
        }
    },
    watch: {
        lfdirHandler: function () {
            //reset data from previous action
            Object.assign(this.$data, getInitialData())

            //electron filesystem
            const fs = require('fs')
            if(this.lfdirHandler.length > 0)
            {
                let dirLocation = Utils.fulldirFunc(this.lfdirHandler)
                let rdir = fs.readdirSync(dirLocation)
                var countList = 0
                rdir.forEach((filename) => {
                    this.listfile.push({
                            id: countList,
                            name: filename,
                            selected: false
                        })
                    countList++
                })
                if(countList > 0)
                    this.isDataExist = true
            }
        },

那么，这个问题的最佳解决方案是什么？我的意思是，如何像处理vue那样处理数据流？使用react state正确吗？谢谢