Реагируйте: Как обновить 2d массив в l oop одним щелчком мыши? - PullRequest
Новая
       12

Реагируйте: Как обновить 2d массив в l oop одним щелчком мыши?

0 голосов
/ 28 января 2020

Я новичок в React и хочу обновить массив 2d в l oop одним щелчком мыши.
Реализация, которую я хочу, похожа на приведенный ниже

  1. L oop 2d массив
  2. Каждый элемент в l oop, закрасьте этот элемент желтым (это означает, что требуется рендеринг)
  3. Этот процесс должен быть отложен для каждого окрашивания

Однако , setState React является асинхронным и пакетным одновременно, поэтому я использовал setTimeout, но он не работает.
Как я могу решить эту проблему. Вот мой код и коды и ссылка на ящик 

import React, { useState } from "react";

export default function App() {
  const [board, setBoard] = useState(Array(10).fill(Array(10).fill(null)));

  const onClick = () => {
    const copy = JSON.parse(JSON.stringify(board));
    board.forEach((row, ridx) => {
      row.forEach((col, cidx) => {
        copy[ridx][cidx] = "yellow";
        setTimeout(setBoard(copy), 1000 * (ridx + cidx));
      });
    });
  };

  return (
    <>
      {board.map((row, ridx) => (
        <div key={ridx} style={{ display: "flex" }}>
          {row.map((col, cidx) => {
            const bgColor = board[ridx][cidx];
            return (
              <div
                style={{
                  width: "64px",
                  height: "64px",
                  border: "1px solid black",
                  backgroundColor: bgColor
                }}
              />
            );
          })}
          <br />
        </div>
      ))}
      <button onClick={onClick}>START</button>
    </>
  );
}

Edit 2d rendering

1 Ответ

0 голосов
/ 28 января 2020

То, что вы делаете - запускаете циклы for мгновенно и меняете значение платы на желтый для всех ячеек. В следующий раз (и каждый раз) вызывается setBoard, плата уже желтая.

Что вы можете изменить - обновить каждую ячейку платы внутри setTimeout.

Один из способов сделать это: 

  function updateBoard(board, row, col) {
    if (col >= board[row].length) {
      row++;
      col = 0;
    }
    board[row][col] = "yellow";
    setBoard(board);

    if(row >= board.length-1 && col >= board[0].length-1) {
      return;
    }
    setTimeout(() => {
      updateBoard(board, row, ++col);
    }, 1000);
  }
...