2D массив с размером от реквизита обновляет только одно измерение

Question

Я работаю через приложение Flavio Copes Pixel Art в его курсе React, и я хотел бы добавить кнопку, которая может изменить размер моего «холста». Холст представляет собой двумерный массив, который инициализируется следующим образом:

const [matrix, setMatrix] = useState(
Array(size)
  .fill()
  .map(() => Array(size).fill(0)));

Переменная size передается в виде подпорки от родительского компонента, который имеет ловушку для управления состоянием из поля ввода. Матрица используется для визуализации компонентов "Pixel" (деления 30px x 30px) путем сопоставления каждой строки / столбца следующим образом:

<div className={css(styles.canvas)}>
      {matrix.map((row, rowIndex) =>
        row.map((_, colIndex) => {
          return (
            <Pixel
              key={`${rowIndex}-${colIndex}`}
              background={Colors[matrix[rowIndex][colIndex]]}
              onClick={() => changeColor(rowIndex, colIndex)}
            />
          );
        })
      )}
    </div>

Я могу обновить ширину холста (количество столбцов) , но я думаю, что общее количество пикселей остается постоянным, и последующие строки складываются / вычитаются, которые не равны количеству столбцов. Вы можете повторить ошибку, введя новое значение в поле «Размер холста» и нажав «Изменить размер холста» на my demo .

Почему число строк отличается от количества столбцов?

Весь код доступен в моем репо .

Answer 1

Я не вижу изменения столбцов / строк в вашем репо. Эта функция должна сделать трюк

const updateMatrixSize = (size) => {
  setMatrix(
    matrix.length > size
      ? matrix.slice(0, size).map(it => it.slice(0, size)))
      : [ 
         ...matrix.map(it => ([
                              ...it,
                              ...new Array(size - matrix.length).fill(0)
                             ])
         ),
         ...new Array(size - matrix.length).fill(0)
        ]
  )
}

PS у вас есть опечатка в вашем репо

props.setMsatrixState(newMatrix);