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

Posted 2023-02-23

【中文标题】如何使用先前状态更新字符串的状态

【英文标题】：How to update the state of a string using previous state

【发布时间】：2020-11-27 01:15:15

【问题描述】：

我是 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>; *

【问题讨论】：

您不需要在循环中设置状态，但最后，您可以分享完整的代码以更好地理解您的代码。

【参考方案1】：

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

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

【参考方案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;
    

【参考方案3】：

最简单的方法：

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

【讨论】：

请在你的答案中添加一些解释，只有一个 sn-p 并不能使它成为一个好的答案。