Проверьте рабочий фрагмент здесь введите описание ссылки здесь
Если вы нажмете кнопку, она переместится на следующую страницу, и когда вы увидите название страницы «MemoryPageTwo» в заголовкеон покажет карты памяти, на которых игрок мог щелкнуть (это событие щелчка должно иметь функцию переключения, и в этом случае это ошибка).
В текущем случае ниже я хочу добавить переключатель на основе индекса внутри функции карты, чтобы добавить функцию переворачивания карты памяти, я хочу сделать это с помощью редуктора ниже.Как мне исправить это в JSX и редукторе, чтобы сделать это переключение?
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"