React：在 setState 中设置数组对象

Posted 2023-02-22

【中文标题】React：在 setState 中设置数组对象

【英文标题】：React: setting array object in setState

【发布时间】：2020-10-22 06:00:07

【问题描述】：

我正在尝试使用 React 中的 setState 方法重置数组。在构造函数中，我最初将 tile_arrays 设置为 null。

第一个 console.log() 在嵌套的 for 循环完成后生成所需的 N Tile 对象数组。当 setState 被调用并且随后的 console.log() 之后，状态仍然是 null 并且没有被更新。

我不是试图将新信息附加到 states 数组，而是完全替换它。

createTileArray()
        let new_array= [];
        let size = this.state.size;
        for(let row = 0; row < size; row++)
            
            for(let column = 0; column < size; column++)
                
                if(row === 0 || row === 1)
                    //Player 1
                    new_array.push(new Tile(column, row, true, 1))
                
                else if(row === size - 1 || row === size - 2)
                    //Player 2
                    new_array.push(new Tile(column, row, true, 2))
                
                else
                    //Empty Tile
                    new_array.push(new Tile(column, row, false, 0))
                

            
        
        console.log("Tile to be set into the state", new_array)
        this.setState(
            tile_arrays:new_array
            
        ,
        () => console.log("Updated Tiles: ", this.state.tile_arrays))
    

【问题讨论】：

this.setState 是异步的，设置后无法记录。尝试在渲染中记录它。

您可能想阅读this 之类的内容。

我修复了console.log()，但是状态仍然没有被新数组更新，有什么想法吗？

所以第一个console.log 与第二个console.log 不匹配？您可以编辑您的问题并在当前信息下方添加一个新部分以表示您当前的代码状态。

好的，我对代码进行了编辑，使其更具可读性，并实现了新的 console.log 更改。为了更清楚一点，第一个 console.log 是为了展示它有一个 Tile 对象数组（它确实记录正确）。第二个 console.log 旨在展示状态现在具有新的更新数组，而不是其初始化的 null 状态。仔细观察后，它甚至看起来不像第二个 console.log 正在输出任何东西。

【参考方案1】：

setState 是异步的，但它允许回调。

 this.setState(
    tile_arrays: tile_array ,
   () => console.log("Updated Tiles: ", this.state.tile_arrays)
 )
    

【讨论】：

所以它没有正确设置 tile_arrays 我不知道为什么

【参考方案2】：

将您的代码复制并粘贴到一个 sn-p 中，以演示我一小时前发表的评论。

尝试在渲染中记录它

class Tile 
  constructor(column, row, something, player) 
    this.column = column;
    this.row = row;
    this.something = something;
    this.player = player;
  

class App extends React.Component 
  state = 
    size: 3,
  ;
  createTileArray() 
    let new_array = [];
    let size = this.state.size;
    for (let row = 0; row < size; row++) 
      for (let column = 0; column < size; column++) 
        if (row === 0 || row === 1) 
          //Player 1
          new_array.push(new Tile(column, row, true, 1));
         else if (row === size - 1 || row === size - 2) 
          //Player 2
          new_array.push(new Tile(column, row, true, 2));
         else 
          //Empty Tile
          new_array.push(new Tile(column, row, false, 0));
        
      
    
    console.log('Tile to be set into the state', new_array);
    this.setState(
      tile_arrays: new_array,
    );
  
  componentDidMount() 
    this.createTileArray();
  
  render() 
    //was that so difficult?
    console.log('tile arrays', this.state.tile_arrays);
    return (
      <pre>JSON.stringify(this.state, undefined, 2)</pre>
    );
  


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

【参考方案3】：

经过一番测试，我找到了解决方案。在我的组件的初始构造函数中，而不是设置

tile_arrays:null

我将它设置为等于一个空数组

tile_arrays:[]

问题似乎已经解决，现在可以正常工作了。