如何使用以前的状态更新字符串的状态

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>`;*如何在每次循环迭代时使用 setState() 更改 HTMLTable 字符串的状态：this.state.HTMLTable += ${currentHTMLRow}</tr>; *

Answer 1

使用先前状态更改状态的方式是这样的：

this.setState(prevState => {

   return {HTMLTable: prevState.HTMLTable + whatever you want};

});

Answer 2

你不应该在 React 的循环中使用 setState 函数。通过查看您的代码，您不需要在循环中使用状态变量。你可以做的是拥有一个局部变量，在循环内更新它，最后将它存储回状态。

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

});