Question

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

在嵌套的for循环完成后，第一个console.log（）生成所需的N个Tile对象数组。调用setState并随后调用随后的console.log（）时，状态仍为null且未更新。

我不是在尝试将新信息添加到状态数组，而是将其完全替换。

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))
    }

Answer 1

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

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

Answer 2

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

尝试将其记录在渲染器中

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>

Answer 3

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

tile_arrays:null

我将其设置为一个空数组

tile_arrays:[]

问题似乎已解决，现在可以解决。

反应：在setState中设置数组对象

3 个答案: