reactjs - React Hook không tái kết xuất array.map sau khi thay đổi state

Hôm nay tôi đang cố gắng kết xuất một số reactHooks bằng cách lặp qua các mảng.

Vấn đề tôi đang gặp phải hiện nay là việc render lại không xảy ra khi trạng thái tileMap được cập nhật.

tileMap là một mảng các mảng các đối tượng (xem cuối bài viết)

Trạng thái thay đổi, tôi có thể ghi lại nó với các giá trị đúng nhưng vẫn không hiển thị các thành phần Tile

function resetGame() {
        console.log("yo");
        
        let tileMap = []
        
        //tileMap is updated here

        //This is always reached
        setTileMap(tileMap)
    }

<div className="life2dgame-root">      
   {
      
      tileMap ? 
        tileMap.map((row) => {
           row.map((tile) => {
              console.log(tile);
                 return <Tile isLife={tile.isAlive}/>
              })
            })
        :
        null
   }
</div>

Loại trạng thái của tileMap

<{
    loc: {height: number, width: number},
    element: JSX.Element,
    isAlive: boolean
}[][]>

Câu trả lời #1

Bạn không trả về gì từ tileMap.map. Thêm một lệnh return và bạn sẽ thấy điều gì đó.

tileMap.map((row) => {
  return row.map((tile) => {
    return <Tile isLife={tile.isAlive}/>
  })
})

Câu trả lời #2

React sử dụng key để quyết định phần tử nào cần render lại; vì bạn không đặt key trong hàm map của mình, React sẽ không cập nhật gì cả. Thử:

tileMap ? 
        tileMap.map((row, index) => {
           row.map((tile) => {
              console.log(tile);
                 return <Tile key={`${row + index}} isLife={tile.isAlive}/>
              })
            })
        :
        null

Chỉnh sửa :

Bạn có thể đặt bất cứ thứ gì bạn muốn vào khóa, tôi không biết giá trị của biến row của bạn nên tôi đã kết hợp nó với chỉ số, nhưng bạn có thể đặt bất cứ gì miễn là nó vẫn duy nhất.