Компонент React Child не отправил обновленное состояние из родительского - PullRequest
Новая
       4

Компонент React Child не отправил обновленное состояние из родительского

1 голос
/ 15 февраля 2020

Я пытаюсь следовать руководству по реагированию на их официальном сайте: https://reactjs.org/tutorial/tutorial.html

Разница лишь в том, что я пытаюсь реализовать его, используя только функциональные компоненты, вот мой код на кодовой ручке:

См. ручку Реагировать функциональный компонент учебника от Snedden Gonsalves ( @ snedden-gonsalves ) на CodePen .

Подводя итог; У меня есть простой компонент квадрата, который состоит из aws отдельных квадратов, компонент родительской доски, который др aws, квадратная доска 3x3 и всеобъемлющий игровой компонент, который поддерживает состояние, такое как история, текущий квадрат, текущий ход и c, как в руководство. В настоящее время я отправляю квадраты из родительского игрового компонента на компоненты платы следующим образом: 

<Board
   onClick ={(i)=>{handleClick(i)}}
   squares = {state.history[state.history.length - 1]}

/>

handleClick создает новое состояние квадратов и добавляет его в массив истории, который я предполагаю должен передаваться динамически, так как я также передаю последнюю запись в массиве, но не похоже, что последняя запись вообще передается дочерним компонентам. Не уверен, что происходит ..

Спасибо за ваше время.

Компоненты:

Квадрат: 

 const Square = (props)=>{
        return(
            <button className="square" onClick={(e)=>props.onClick()}>
                {props.value}
            </button>
        )
    }

Доска : 

const Board = (props) => {
    const renderSquare = (i)=>{
        return <Square
            value={props.squares[i]}
            onClick={() => {
                props.onClick(i)
                }
            }
        />
    }
    return(
        <div>
            <div className="board-row">
                {renderSquare(0)}
                {renderSquare(1)}
                {renderSquare(2)}
            </div>
            <div className="board-row">
                {renderSquare(3)}
                {renderSquare(4)}
                {renderSquare(5)}
            </div>
            <div className="board-row">
                {renderSquare(6)}
                {renderSquare(7)}
                {renderSquare(8)}
            </div>
        </div>
    )
}

Игра: 

const Game = () =>{
    let [state, setState] = useState({
        history:[{
            squares:Array(9).fill(null)
        }],
        isXNext:true,
        status:'Next player X'
    });

    useEffect(() =>{
        const currentSquares = state.history[state.history.length - 1].squares;
        const winner = calculateWinner(currentSquares);
        if(winner){
            setState( state => ({...state, status:'Winner is ' + winner, ended:true}));
        }
    },[state.history]);


    const handleClick = (i) =>{
        const currentSquares = state.history[state.history.length - 1].squares;

        if(state.ended || currentSquares[i])
            return;

        const newSquares = currentSquares.slice();
        newSquares[i] = state.isXNext?'X':'O';

        const newIsXNext = !state.isXNext;
        const newHistory = state.history.concat([
            {squares:newSquares}]);

        setState(state => ({...state,
            history: newHistory,
            isXNext: newIsXNext,
            status:'Next player ' + (newIsXNext?'X':'O')
        }));

    }

    return(
        <div className="game">
            <div className="game-board">
                <Board
                    onClick ={(i)=>{handleClick(i)}}
                    squares = {state.history[state.history.length - 1]}
                />
            </div>
            <div className="game-info">
                <div>{state.status}</div>
                <ol>{/* TODO */}</ol>
            </div>
        </div>
    );
}

1 Ответ

0 голосов
/ 15 февраля 2020

Получается, что он проходил обновленное состояние. Я не использовал правильную клавишу, вот как я это исправил: 

<Board
    onClick ={(i)=>{handleClick(i)}}
    squares = {state.history[state.history.length - 1].squares}/>

Рабочий код ручки:

См. Перо Реагировать функциональный компонент учебника Working от Snedden Gonsalves ( @ snedden-gonsalves ) на CodePen .
...