UseContext 및 UseReducer를 배우기 위해 React를 사용하여 간단한 'Nonogram'/ 'Picross'게임을 만들려고하는데, 사용하는 값이 변경 될 때 내 상위 구성 요소 (App)가 다시 렌더링되지 않는 이유에 대해 의아해합니다. 아마도 나는 기본적인 것을 놓치고 있지만 온라인에서 문서와 예제를 읽었으며 왜 다시 렌더링되지 않는지 알 수 없습니다.

예상 : 사용자가 응용 프로그램으로 이동하여 사각형을 클릭하여 값을 변경하고 (사각형을 클릭하여 십자가를 그립니다) 보드 아래의 텍스트는 'isComplete'값을 기반으로하므로 "축하합니다!"라고 표시됩니다.

문제 : 위와 같지만 '계속 시도'가 남아 있습니다.

UseReducer 함수에 정의 된대로 boardState를 볼 수있는 버튼도 추가했습니다.

코드는 다음과 같습니다.

App.js

import './App.css';
import { useReducer } from 'react';
import Table from './Table';
import BoardContext from './BoardContext';
import boardReducer from './BoardReducer';

function App() {
  //Puzzle layout
  const puzzleArray = [
    [true, false, true], 
    [false, true, false], 
    [true, false, true]
  ];

  //Creating a set of blank arrays to start the game as the userSelection
  const generateUserSelection = () => {
    const userSelection = [];
    puzzleArray.forEach(row => {
      let blankRow = [];
      row.forEach(square => {
        blankRow.push(false)
      });
      userSelection.push(blankRow);
    })
    return userSelection;
  };

  //Initial Context value
  const boardInfo = {
    puzzleName: "My Puzzle",
    puzzleArray: puzzleArray,
    userSelection: generateUserSelection(),
    isComplete: false
  };

  const [ boardState, dispatch ] = useReducer(boardReducer, boardInfo)

  return (
    <BoardContext.Provider value={{board: boardState, dispatch}}>
      <div className="App">
        <header className="App-header">
          <p>
            Picross
          </p>
          <Table />
        </header>
        <div>
          {boardState.isComplete ? 
            <div>Congratulations!</div>
          : <div>Keep trying</div>
          }
        </div>
        <button onClick={() => console.log(boardState)}>boardState</button>
      </div>
    </BoardContext.Provider>
  );
}

export default App;

Table.jsx :

import { useContext, useEffect } from 'react';
import './App.css';
import Square from './Square';
import BoardContext from './BoardContext';

function Table() {

    useEffect(() => {console.log('table useEffect')})

    const { board } = useContext(BoardContext);

    const generateTable = solution => {
        const squareLayout = []

        for (let i = 0; i < solution.length; i++) {
            const squares = []
            for (let j = 0; j < solution[i].length; j++) {
                squares.push(
                    <Square 
                        position={{row: i, column: j}}
                    />
                );
            };
            squareLayout.push(
                <div className="table-row">
                    {squares}
                </div>
            );
        };
        return squareLayout;
    };

  return (
    <div className="grid-container">
        {generateTable(board.puzzleArray)}
    </div>
  );
}

export default Table;

Square.jsx

import { useContext, useState } from 'react';
import './App.css';
import BoardContext from './BoardContext';

function Square(props) {
  
    const { board, dispatch } = useContext(BoardContext)

    const [ isSelected, setIsSelected ] = useState(false);
    const { position } = props;

    const handleToggle = () => {
        console.log(board)
        board.userSelection[position.row][position.column] = !board.userSelection[position.row][position.column]
        dispatch(board);
        setIsSelected(!isSelected);
    }

    return (
    <div className={`square ${isSelected ? " selected" : ""}`}
        onClick={handleToggle}
    >
        {position.row}, {position.column}
    </div>
  );
}

export default Square;

감사

편집 : 나는 이와 같은 간단한 응용 프로그램의 경우 상태를 소품을 통해 전달하는 것이 매우 쉬울 것이라는 것을 알고 있지만 아이디어는 다른 후크를 연습하는 것이므로 피하고 싶습니다. 내가 여기서 실천하고있는 아이디어는 이상적으로는 미래의 더 큰 프로젝트로 확장 될 수있을 것입니다.

편집 2 : 요청에 따라 다음은 내 BoardReducer.js 파일입니다.

const boardReducer = (state, updateInfo) => {

    let isComplete = false;

    if (JSON.stringify(updateInfo.userSelection) === JSON.stringify(state.puzzleArray)) {
        isComplete = true;
    }

    updateInfo.isComplete = isComplete;
    return updateInfo;
}

export default boardReducer;

(JSON.stringify를 사용하여 일치하는 배열을 확인하는 저렴한 방법으로 지금은 작은 것입니다!)