Передача массива как реквизита меняет тип

Question

У меня есть следующее:

export default function World() {
  const { backgroundTiles } = typedLevelData[`level_1`];
  console.log(Array.isArray(backgroundTiles));

  return (
    <Background {...backgroundTiles}/>
  )
}

Как и следовало ожидать, журнал консоли возвращает истину. Однако в компоненте Background попытка вызвать forEach возвращает ошибку TypeError, в которой указано, что background.forEach не является функцией.

export default function Background(backgroundTiles : BackgroundTile[]) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current!;
    const ctx2d = canvas.getContext('2d')!;
    ctx2d?.clearRect(0, 0, 1200, 600);
    console.log(Array.isArray(backgroundTiles));

    backgroundTiles.forEach(async ({tileType, positions}) => {
      const image = await getImageByTileType[tileType];
      positions.forEach(([x, y]) => {
        ctx2d.drawImage(image, x, y);
      })
    })
  }, [backgroundTiles])

  return (
    <canvas
      className={styles.canvas}
      ref={canvasRef}
      height={600}
      width={1200}
    />
  )
}

Edit: BackgroundTile:

export interface BackgroundTile {
  tileType: TileTypes,
  passable: boolean,
  positions: number[][]
}

Answer 1

Вы пытаетесь распространить массив на объект.

Он просто выполняет итерацию по массиву, как если бы это был объект, и добавляет свойства на лету, вот пример

const arr = ['a','b','c']
{...arr} === {0: "a", 1: "b", 2: "c"} // something similar goes to your component.

Итак, решение - просто передайте именованную опору в Background (это предпочтительный вариант)

<Background backgroundTiles={backgroundTiles}/>

или уничтожьте весь объект с помощью backgroundTiles

<Background {...typedLevelData[`level_1`]}/>

Но также не делайте этого. забудьте разрушить его в фоновом компоненте,

export default function Background({backgroundTiles} : {backgroundTiles:BackgroundTile[]}) {

, потому что первый аргумент, который получает компонент (реквизиты), - это объект

Answer 2

Не уверен, как выглядит backgroundTiles, но вам лучше попробовать передать его так в свой компонент:

export default function World() {
  const { backgroundTiles } = typedLevelData[`level_1`];
  console.log(Array.isArray(backgroundTiles));

  return (
    <Background backgroundTiles={backgroundTiles}/>
  )
}