Как обновить состояние строки, используя предыдущее состояние

Question

Я новичок в React и Javascript. У меня есть компонент класса с конструктором и функцией, которые выглядят следующим образом:

class MyComponent extends Component {
constructor(props) {
    super(props)
    this.state = {
       HTMLTable : ""  
    }
createGrid ()
{
    for(let row = 0; row <= 20;row++)
    {
        let currentHTMLRow = `<tr id = "Row ${row}">`;
        for(let col = 0; col < 50; col++)
        {
            let newNodeId = `${row}_${col}`;
            let NodeClass = "unvisited";
            currentHTMLRow = currentHTMLRow +`<td id = "${newNodeId}" class = "${NodeClass}"></td>`
        }
        this.state.HTMLTable += `${currentHTMLRow}</tr>`;
    }
    let chart = document.getElementById("grid");
    chart.innerHTML = this.state.HTMLTable;
}
}

Это дает желаемый эффект, но меня предупредили о том, чтобы не изменять значение состояния, подобное этому

this.state.HTMLTable += `${currentHTMLRow}</tr>`;

* Как изменить состояние строки HTMLTable с помощью setState () каждый раз, когда l oop повторяется так, что: this.state.HTMLTable + = ${currentHTMLRow}</tr>; *

Answer 1

способ изменения состояния с использованием предыдущего состояния:

this.setState(prevState => {
   return {HTMLTable: prevState.HTMLTable + whatever you want};
});

Answer 2

Вы не должны использовать функцию setState в l oop в React. Глядя на свой код, вам не нужна переменная состояния внутри l oop. Что вы можете сделать, так это создать локальную переменную, обновить ее внутри l oop и в конце сохранить обратно в состояние.

class MyComponent extends Component {
constructor(props) {
    super(props)
    this.state = {
       HTMLTable : ""  
    }
createGrid () {
    let HTMLTable = ""; // Use local varibale
    for(let row = 0; row <= 20;row++)
      {
          let currentHTMLRow = `<tr id = "Row ${row}">`;
          for(let col = 0; col < 50; col++)
          {
              let newNodeId = `${row}_${col}`;
              let NodeClass = "unvisited";
              currentHTMLRow = currentHTMLRow +`<td id = "${newNodeId}" class = "${NodeClass}"></td>`
          }
          HTMLTable += `${currentHTMLRow}</tr>`;
      }
      this.setState({HTMLTable}); // Store it back to the state.
      let chart = document.getElementById("grid");
      chart.innerHTML = HTMLTable;
    }
}

Answer 3

Самый простой способ:

this.setState({
    HTMLTable: this.state.HTMLTable+=currentHTMLRow
});