React：在 setState 中设置数组对象

Question

我正在尝试使用 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))    }

Answer 1

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

尝试在渲染中记录它

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 2

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

 this.setState(

   { tile_arrays: tile_array },

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

 )

Answer 3

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

tile_arrays:null

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

tile_arrays:[]

该问题似乎已解决并且现在可以正常工作。