Question

此错误：超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

为什么会出现此错误？

  import React, { Component } from 'react';
  import './App.css';

    class App extends Component {
       constructor(props){
         super(props);
         this.state=({
           todos:[],
         })
         this.add = this.add.bind(this);
         this.remove = this.remove.bind(this);
    }
    //this.array.splice(2,1)
    /*
      let arrayy = [...this.state.array]
      let removed = arrayy.splice(deger,1);
      this.setState({
        array:arrayy,
      })
    */

    add(){
      const deger = document.getElementById('deger').value;
      const todosarray = this.state.todos;
      todosarray.push(deger)
      this.setState({
        todos:todosarray,
      })
    }

    remove(num){
      let arrayy = [...this.state.todos]
      arrayy.splice(num,1)
      this.setState({
        array:arrayy,
      })
    }

    render() {
      const data = this.state.todos;
      const listItems = data.map((result,i) => <li key={i} onClick={this.remove(i)}>{result }</li>);
      return (
        <div >
          <input id="deger"></input>
          <button onClick={this.add}>Add</button>
          <div id="items">
            {listItems}
          </div>
        </div>
      );
    }
  }
  export default App;

Answer 1

替换此：

      private void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
    {
        int process = ((DataParameter)e.Argument).Process;
        int delay = ((DataParameter)e.Argument).Delay;
        int index = 1;

        try
        {
            //for (int i = 0; i < process; i++)
            //{
                //if (!backgroundWorker.CancellationPending)
                //{
                //    backgroundWorker.ReportProgress(index++ * 100 / process, string.Format("Process data {0}", i));
                //    Thread.Sleep(delay);
                //}
            // }

        }
        catch (Exception ex)
        {
            backgroundWorker.CancelAsync();
            MessageBox.Show(ex.Message, "Message", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }

    private void backgroundWorker_ProgressChanged(object sender, ProgressChangedEventArgs e)
    {
        progress.Value = e.ProgressPercentage;
        lblPercent.Text = string.Format("Processing...{0}%", e.ProgressPercentage);
        progress.Update();
    }

    private void backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
    {
        MessageBox.Show("Process has been completed.", "Message", MessageBoxButtons.OK, MessageBoxIcon.Information);
    }

    private void buttonBrowse_Click(object sender, EventArgs e)
    {
        OpenFileDialog fd = new OpenFileDialog();
        fd.Filter = "File Excel|*.xlsx";
        DialogResult re = fd.ShowDialog();
        excel_name = fd.SafeFileName;
        if (re == DialogResult.OK)
        {
            string fileName = fd.FileName;

            if (!backgroundWorker.IsBusy)
            {
                inputParameter.Delay = 100;
                inputParameter.Process = 200;
                backgroundWorker.RunWorkerAsync(inputParameter);
                ReadExcel(fileName); 
            }
        }
    }

    public void ReadExcel(string Path)
    {
        Excel.Application xlApp;
        Excel.Workbook xlWorkBook;
        Excel.Worksheet xlWorkSheet;
        Excel.Range range;

        int rCnt;
        int cCnt;
        int rw = 0;
        int cl = 0;

        xlApp = new Excel.Application();
        xlWorkBook = xlApp.Workbooks.Open(Path, 0, true, 5, "", "", true, Microsoft.Office.Interop.Excel.XlPlatform.xlWindows, "\t", false, false, 0, true, 1, 0);
        xlWorkSheet = (Excel.Worksheet)xlWorkBook.Worksheets.get_Item(1);

        range = xlWorkSheet.UsedRange;
        rw = range.Rows.Count;
        cl = range.Columns.Count;
        int tenPercent = rw / 10;
        int percentCounter = 0;
        for (rCnt = 1; rCnt <= rw; rCnt++)
        {
            for (cCnt = 0; cCnt <= cl; cCnt++)
            {
                no = Convert.ToString((range.Cells[rCnt, 1] as Excel.Range).Value);
                name = Convert.ToString((range.Cells[rCnt, 2] as Excel.Range).Value);
                time_to = Convert.ToString((range.Cells[rCnt, 3] as Excel.Range).Value);
            }
            if (++percentCounter == tenPercent)
            {
                double progress = rCnt / (double)rw;
                lblPercent.Text = string.Format("Processing...{0}%", 100 * progress);
                percentCounter = 0;
            }
            DateTime dt = DateTime.Parse(no);
            string date =  dt.ToString("yyyy'/'MM'/'dd");

            double d = double.Parse(name);
            DateTime conv = DateTime.FromOADate(d);
            string time = conv.ToString("HH:mm:ss");

            double f = double.Parse(time_to);
            DateTime conv2 = DateTime.FromOADate(f);
            string time2 = conv2.ToString("HH:mm:ss");

            epg_id = ((range.Cells[rCnt, 4] as Excel.Range).Value);


            SQLiteConnection sqliteCon = new SQLiteConnection(dbConnectionString);
            sqliteCon.Open();
            string selectQuery = "SELECT * FROM EPGdaten WHERE File=@File";
            command = new SQLiteCommand(selectQuery, sqliteCon);
            command.Parameters.Add(new SQLiteParameter("@File", epg_id));
            sqdr = command.ExecuteReader();
            if (sqdr.Read())
            {
               string s = sqdr.GetValue(1).ToString();
               string b = sqdr.GetValue(3).ToString();
               dataGridView1.Rows.Add(date, time, time2, s, b);
            }
            else
            {
                dataGridView1.Rows.Add(date, time, time2);
            }


            sqdr.Close();
            sqliteCon.Close();
            sqliteCon.Dispose();
        }
        xlWorkBook.Close(true, null, null);
        xlApp.Quit();

        Marshal.ReleaseComObject(xlWorkSheet);
        Marshal.ReleaseComObject(xlWorkBook);
        Marshal.ReleaseComObject(xlApp);
    }

通过这个：

onClick={this.remove(i)}

说明：渲染时，React评估onClick={() => this.remove(i)}，这会改变状态或道具，从而触发另一次渲染，并循环以重新评估this.remove(i)；创建一个（隐藏的）无限循环。 this.remove(i)是一个函数，因此状态或道具不会更改。另外，它可能还是您想要编写的代码；）

超过最大更新深度-React Js

1 个答案: