反应：在 setState 中设置数组 object

Question

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

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

我不是试图将 append 新信息添加到 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

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:[]

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