[英]React: setting array object in setState
我正在嘗試使用 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))
}
setState
是異步的,但它確實允許回調。
this.setState(
{ tile_arrays: tile_array },
() => console.log("Updated Tiles: ", this.state.tile_arrays)
)
將您的代碼復制並粘貼到一個片段中,以演示我一小時前發表的評論。
嘗試在渲染中記錄它
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>
經過一些測試,我找到了解決方案。 在我的組件的初始構造函數中,而不是設置
tile_arrays:null
我將它設置為等於一個空數組
tile_arrays:[]
該問題似乎已解決並且現在可以正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.