하위 구성 요소에 업데이트 된 상태가 표시되지 않음

React tutorial의 개정판입니다. 내 의도는 하나 또는 두 명의 플레이어를 선택하여 이동 자동 선택쪽으로 이동하는 것입니다. 이 단계에서 몇 가지 이유로 이 handleMove(i)이라는 문으로 this.setState({squares:this.state.squares, xIsNext: !this.state.xIsNext}) 문으로 캡처되지 않습니다. 이는 Button 및 Square 구성 요소에서 두 개의 console.log 호출 에서 볼 수 있습니다.하위 구성 요소에 업데이트 된 상태가 표시되지 않음

이것은 자습서에서 사용되는 기술이므로 제곱 배열이 업데이트가 아닌 이유인지 잘 모르겠습니다. 나는 다른 글과 (이 경우 handleMove(i), 올바른?) 상태가 으로 변경되기 전에 완료되어야한다는 불변성에 대한 Facebook의 토론을 전체적인 상태에 반영했다. 다른 구성 요소의 console.log 및 전체 DOM 에 대한 호출은 사각형에 대한 클릭을 반영하지 않습니다.

아무도 왜 이것이 작동하지 않는지 말할 수 있습니까? 고맙습니다. JSBin

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Tic Tac Toe</title> 
<script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<div id='root'></div> 
<script type='text/babel' > 


function Square(props){ 
    console.log(props.value); 
    return(
    <button className="square" onClick={() => props.onClick()}>{props.value}</button>  
    ); 
} 



class Board extends React.Component{ 
    renderSquare(i){ 
    console.log(this.props.squares); 
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} /> 
    } 

    render(){ 
    return(
    <div className="board"> 
    <div className="row"> 
     {this.renderSquare(0)} 
     {this.renderSquare(1)} 
     {this.renderSquare(2)} 
    </div> 
    <div className="row"> 
     {this.renderSquare(3)} 
     {this.renderSquare(4)} 
     {this.renderSquare(5)} 
    </div> 
    <div className="row"> 
     {this.renderSquare(6)} 
     {this.renderSquare(7)} 
     {this.renderSquare(8)} 
    </div> 
    </div> 
    ); 
    } 
} 


class Game extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     onePlayerGame: true, 
     squares: Array(9).fill(null), 
     xIsNext: true 
    } 
    } 

    onePlayer(){ 
    this.setState({onePlayerGame: true}); 
    return(
    document.getElementById('onePlayer').style.color = "yellow", 
    document.getElementById('twoPlayer').style.color = "black" 
    ); 
    } 


    twoPlayer(){ 
    this.setState({ onePlayerGame: false}); 
    return(
    document.getElementById('onePlayer').style.color= "black", 
    document.getElementById('twoPlayer').style.color= "yellow" 
    ); 

    } 

    handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: this.state.squares, 
     xIsNext: !this.state.xIsNext 
    }) 
    } 



    render(){ 
    return(
    <div id="main"> 
     <div> 
     <button className="gameSelect" id="onePlayer" value={this.state.onePlayerGame} onClick={() => this.onePlayer()} >One Player</button> 
     <button className="gameSelect" id="twoPlayer"value={this.state.onePlayerGame} onClick={() => this.twoPlayer()} >Two Players</button> 
     </div> 

     <Board 
     squares={this.state.squares} 
     onClick={(i) => this.handleMove(i)} /> 

    </div> 
    ); 
    } 
} 



ReactDOM.render(
    <Game />, 
    document.getElementById('root') 
) 



</script> 
</body> 
</html>

출처

2017-04-16 Cameron

에

이 선택은 캡처되어 있지만 state에서 squares의 새로운 값을 저장하지 않습니다.

이

handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: this.state.squares, <----- You are not assigning the new value 
     xIsNext: !this.state.xIsNext 
    }) 
}

여기

handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: squares, 
     xIsNext: !this.state.xIsNext 
    }) 
}

적절한 jsbin

출처

2017-04-16 23:50:42 QoP

우수한되어야! 고맙습니다. – Cameron

하위 구성 요소에 업데이트 된 상태가 표시되지 않음

답변

관련 문제