Question

上查看有效的代码段

如果单击该按钮，它将滑至下一页，并且在标题中看到页面名称“ MemoryPageTwo”时，它将显示存储卡，供播放器单击（此单击事件应具有切换功能，并且就是这种情况下的错误）。

在下面的当前情况下，我想基于map函数内的索引添加一个切换，以便添加一个存储卡翻转功能，我想在下面使用一个reducer。如何在JSX和reducer中修复该问题以进行切换？

onst MemoryPageTwo = ({ chosenImage, memoryCardCheck, flipped}) => {
    let memoryCardsOutput = chosenImage.map((card, index) => {

        return (
            <div key={index}>
                
                <img 
                    className={card.flipped ? 'memory-card flipped' : 'memory-card unflipped' } 
                    alt={card.name}
                    src={card.imageUrl}
                    onClick={() => memoryCardCheck(index)}
                />
            </div>
        )   
    });

    return (
        <div>
            MemoryPageTwo
            { memoryCardsOutput }
        </div>
    )
}

const mapDispatchToProps = dispatch => ({
    memoryCardCheck: index => dispatch(memoryCardCheck(index))
})

const mapStateToProps = state => {
    console.log(state.app.memoryCards[0]) // 
    return {
        chosenImage: state.app.memoryCards || []
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(MemoryPageTwo);

REDUCER
const initialState = {
    flipped: false
}; 

const reducer = (state = initialState, { type, index }) => {
    switch (type) {
    case types.CARD_CHECK: {
        console.log(index, state.flipped); // output for example: 0 false
        
    default:
            return state;
    }
}


console.log(state.app.memoryCards[0]) outputs the following objects and as you might see flipped keyname should be added in the className boolean. 
 
flipped: false
imageName: "klm1"
imageUrl: "../assets/klm1.jpeg"
level: 1
maxPassengers: 268
maxSpeed: 880
name: "Airbus"
type: "A330-200"

React Redux切换布尔值

0 个答案: