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 {&nbsp; constructor(column, row, something, player) {&nbsp; &nbsp; this.column = column;&nbsp; &nbsp; this.row = row;&nbsp; &nbsp; this.something = something;&nbsp; &nbsp; this.player = player;&nbsp; }}class App extends React.Component {&nbsp; state = {&nbsp; &nbsp; size: 3,&nbsp; };&nbsp; createTileArray() {&nbsp; &nbsp; let new_array = [];&nbsp; &nbsp; let size = this.state.size;&nbsp; &nbsp; for (let row = 0; row < size; row++) {&nbsp; &nbsp; &nbsp; for (let column = 0; column < size; column++) {&nbsp; &nbsp; &nbsp; &nbsp; if (row === 0 || row === 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Player 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new_array.push(new Tile(column, row, true, 1));&nbsp; &nbsp; &nbsp; &nbsp; } else if (row === size - 1 || row === size - 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Player 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new_array.push(new Tile(column, row, true, 2));&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Empty Tile&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new_array.push(new Tile(column, row, false, 0));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; console.log('Tile to be set into the state', new_array);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; tile_arrays: new_array,&nbsp; &nbsp; });&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.createTileArray();&nbsp; }&nbsp; render() {&nbsp; &nbsp; //was that so difficult?&nbsp; &nbsp; console.log('tile arrays', this.state.tile_arrays);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <pre>{JSON.stringify(this.state, undefined, 2)}</pre>&nbsp; &nbsp; );&nbsp; }}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是异步的，但它确实允许回调。&nbsp;this.setState(&nbsp; &nbsp;{ tile_arrays: tile_array },&nbsp; &nbsp;() => console.log("Updated Tiles: ", this.state.tile_arrays)&nbsp;)

Answer 3

经过一些测试，我找到了解决方案。在我的组件的初始构造函数中，而不是设置tile_arrays:null我将它设置为等于一个空数组tile_arrays:[]该问题似乎已解决并且现在可以正常工作。