Question

我的App.js中有两个容器，状态保存在Redux存储中。

 <StartGameContainer/>
 <GameContainer/>

我的应用程序的状态有一个名为“ gameStatus” 的属性，该属性设置为false。我尝试使用此属性在GameContainer中渲染我的组件（如果为true）。当我在StartGameContainer中单击“开始”按钮时，此属性设置为true。

当应用最初呈现时，它会注意到此属性为false。当我单击开始按钮时，它不会渲染GameContainer中的内容。我怎么能做到这一点或弄错了这个布局？

编辑

GameContainer.js

const mapStateToProps = state => (
    {
        board: state.boardGame.board,
        gameStatus: state.boardGame.gameStatus
    }
);

const mapDispatchToProps = dispatch => {
    return {
        initGame: () => {
            dispatch(allActions.initGame())
        },

        selectCol : (val) => {
            dispatch(allActions.dropTile(val))
        }
    }
};

const GameContainer = connect(mapStateToProps, mapDispatchToProps)(GridCells);

class GridCells extends Component {

    componentDidMount() {
        this.props.initGame();
    }

    render() {
        if(this.props.gameStatus){
            return (
                <div className="game">
                    <table>
                        <thead>
                        </thead>
                        <tbody>
                        {this.props.board.map((row, i) => (
                            <RowCells key={i} row={row} select={this.props.selectCol}/>
                        ))}
                        </tbody>
                    </table>
                </div>
            )
        }else{
            return(<div></div>)
        }
    }
}

StartGameContainer.js

const mapDispatchToProps = dispatch => {
    return{
        pickPlayer: (currPlayer) => {
            dispatch(allActions.setPlayer(currPlayer))
        }
    }
};
const StartGameContainer = connect(null, mapDispatchToProps)(StartGame);


class StartGame extends Component{
    constructor(props){
        super(props);
        this.players = ['myself', 'service'];
        this.selectedVal = 1;
    }

    selectedPlayer(event){
        this.selectedVal = event.target.value === 'myself' ? 1 : 2;
    }

    render(){
        let options = this.players.map((val) => {
            return (<option key={val} value={val}>{val}</option>)
        });
        return(
            <div className='startGame'>
                <select name="players" id="players" onChange={this.selectedPlayer.bind(this)}>
                    {options}
                </select>
                <button onClick= {() => {this.props.pickPlayer(this.selectedVal)}}>Start Game</button>
            </div>
        )
    }
}

Answer 1

不能完全确定您的Redux逻辑是什么样子...但是您押注您的问题是由于对hoisting的工作方式有误解。

尝试将两个连接代码行都放在类定义下面：

class StartGame extends Component{ ... }

const StartGameContainer = connect(null, mapDispatchToProps)(StartGame)

查看此SO answer，了解如何悬挂JS类但未初始化。

“在定义类之前使用类绝不是一个好主意”

这是一个简化的示例，可以帮助您更好地理解为什么代码没有引发错误，但是也无法正常工作。请考虑以下代码段：

function logYourClass() {
  console.log(yourClass)
  var yourClass = 'all the class details'
}
logYourClass()

如果运行此命令，则会发现undefined被记录下来，并且没有抛出“ yourClass未定义” ReferenceError。这是因为上面的代码等效于编写：

function logYourClass() {
  var yourClass
  console.log(yourClass)
  yourClass = 'all the class details'
}
logYourClass()

还应注意，未悬挂了ES6 let和const声明。尝试将以上代码中的var替换为其中一个关键字，您会看到Uncaught ReferenceError。

function logYourClass() {
  console.log(yourClass)
  const yourClass = 'all the class details'
}
logYourClass()

根据逻辑React / Redux渲染容器

1 个答案: