Блог

у меня был проект по игре с соответствующими карточками.игра состоит в том, чтобы выбрать карту в карточной сетке, если содержимое двух тележек одинаковое, поэтому эти две тележки будут соответствовать ее свойству true и будут отображаться зеленым цветом, а в компоненте оценки будут отмечены 2 совпадающие карты и так далее, если карта не совпадает, содержимое цвета карт будет красным, и сюда придет другая функция обработчика, чтобы сделать две карты невидимыми, изменив свойство объекта карты видимым на ложное. Я выпустил эту функцию, она хорошо работает в консоли, но когда я попробую ее в приложении кода, она вообще не работает пожалуйста, помогите мне исправить это, есть компоненты моего кода :

 the boardSlice:  const initialState = [  {id: 0, contents: 'Provider', visible: true, matched: true},   {id: 1, contents: 'Provider', visible: true, matched: true},   {id: 2, contents: 'selector', visible: true, matched: true},   {id: 3, contents: 'selector', visible: true, matched: true},   {id: 4, contents: 'useSelector()', visible: true, matched: true},   {id: 5, contents: 'useSelector()', visible: true, matched: true},   {id: 6, contents: 'useDispatch()', visible: true, matched: true},   {id: 7, contents: 'useDispatch()', visible: true, matched: true},   {id: 8, contents: 'Pure Function', visible: true, matched: true},   {id: 9, contents: 'Pure Function', visible: true, matched: true},   {id: 10, contents: 'react-redux', visible: true, matched: true},   {id: 11, contents: 'react-redux', visible: true, matched: true},  ];  export const boardReducer = (state = initialState, action) =gt; {  switch (action.type) {  case 'board/setBoard':  let setState = [];  action.payload.forEach((element, index) =gt;   setState.push({id: index,   contents: element,   visible: false,   matched: false})  );  return setState;    case 'board/flipCard':  let flipState = [...state];  const cardID = action.payload;  flipState[cardID] = {...state[cardID], visible:true}  const [index1, index2] = flipState.filter(card =gt; card.visible).map(card =gt; card.id);  if (index2 !== undefined) {  let card1 = flipState[index1];  let card2 = flipState[index2];  if (card1.contents === card2.contents) {  flipState[index1] = {...card1, visible: false, matched: true};  flipState[index2] = {...card2, visible: false, matched: true};  }  }  return flipState;  case 'board/resetUnmatchedCards':  let newState = [...state];  let [indexa, indexb] = newState.filter(card =gt; card.visible === true amp;amp; card.matched === false).map(card =gt; card.id);  if (indexb !== undefined) {  let cardA = newState[indexa];  let cardB = newState[indexb];  newState[indexa] = {...cardA, visible: action.payload};  newState[indexb] = {...cardB, visible: action.payload}  }  return newState  case 'board/resetCards':  return state.map(card =gt; ({...card, visible: false}));    default:  return state;  } }  const wordPairs = [  'Provider', 'Provider',   'selector', 'selector',   'useSelector()', 'useSelector()',   'useDispatch()', 'useDispatch()',  'Pure Function', 'Pure Function',  'react-redux', 'react-redux', ]  const randomWords = () =gt; {  let words = []  let newWordPairs = [...wordPairs]  const reps = newWordPairs.length  for (let i = 0 ; i lt; reps ; i  ) {  const wordIndex = Math.floor(Math.random() * newWordPairs.length);  words.push(newWordPairs[wordIndex])  newWordPairs.splice(wordIndex, 1)  }   return words; }   // action creators export const setBoard = () =gt; {  const words = randomWords()  return {  type: 'board/setBoard',  payload: words  } }  export const flipCard = (id) =gt; {  return {  type: 'board/flipCard',  payload: id  } }  export const resetCards = (indices) =gt; {  return {  type: 'board/resetCards'  } }; export const resetUnmatchedCards = () =gt; {  return {  type: 'board/resetUnmatchedCards',  payload: false  } }  // Add selector export statments below export const selectBoard = (state) =gt; {   return ( state.board.map(card=gt;   ({  id: card.id,  contents: card.contents  })    ))} export const selectVisibleIDs = state =gt; {  return (  state.board.filter(card =gt; card.visible)  .map(card =gt; card.id)  ) } export const selectMatchedIDs = state =gt; {  return ( state.board.filter(card =gt; card.matched)  .map(card =gt; card.id)); };    

 the App component : import './App.css'; import React from 'react'; import { Score } from './features/score/Score.js'; import { Board } from './features/board/Board.js'; import { useDispatch } from 'react-redux'; import { setBoard, resetCards } from './features/board/boardSlice';  // Add import statements below    const App = () =gt; {  // Add dispatch variable below  const dispatch = useDispatch();   const startGameHandler = () =gt; {  // Add action dispatch below  dispatch(setBoard())  };   const tryAgainHandler = () =gt; {  // Add action dispatch below  dispatch(resetCards())  };   return (  lt;div className="App"gt;  lt;Score /gt;  lt;Board /gt;  lt;footer className="footer"gt;  lt;button onClick={startGameHandler} className="start-button"gt;  Start Game  lt;/buttongt;  lt;button onClick={tryAgainHandler} className="try-new-pair-button"gt;  Try New Pair  lt;/buttongt;  lt;/footergt;  lt;/divgt;  ); };  export default App;   

 the board component : import React from 'react'; import { CardRow } from './cardRow/CardRow.js'; // Add import statements below import { useSelector } from 'react-redux'; import { selectBoard } from './boardSlice';   export const Board = () =gt; {  // Add selected data variable and implement below  const currentBoard = useSelector(selectBoard);   const numberOfCards = currentBoard.length;  const columns = 3;  const rows = Math.floor(numberOfCards / columns);   const getRowCards = (row) =gt; {  const rowCards = [];  for (let j = 0; j lt; columns; j  ) {  const cardIndex = row * columns   j;  // Implement selected data below  rowCards.push(currentBoard[cardIndex]);  }  return rowCards;  }; console.log(currentBoard)  let content = [];  for (let row = 0; row lt; rows; row  ) {  const rowCards = getRowCards(row);  content.push(  lt;CardRow   key={row}   cards={rowCards}   /gt;  );  }  return lt;div className="cards-container"gt;{content}lt;/divgt;; };   

 the cardRow.js: import React from 'react'; import { Card } from './card/Card.js'; import {selectMatchedIDs } from '../boardSlice' export const CardRow = ({ cards }) =gt; {  const content = cards.map(card =gt;   lt;Card   key={card.id}   id={card.id}   contents={card.contents}     /gt;)   return lt;gt;{content}lt;/gt;; };    

 the Card.js: import React, {useEffect} from 'react'; // Add import statements below  import { useSelector, useDispatch } from 'react-redux'; import { selectVisibleIDs, flipCard, selectMatchedIDs, } from '../../boardSlice'; import { resetCards, resetUnmatchedCards } from '../../boardSlice' let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";  export const Card = ({ id, contents }) =gt; {  // Add selected data and dispatch variables below  const visibleIDs = useSelector(selectVisibleIDs)   const dispatch = useDispatch();  const matchedIDs = useSelector(selectMatchedIDs); console.log(visibleIDs) console.log(matchedIDs);   // flip card action  const flipHandler = (id) =gt; {  // Add action dispatch below  dispatch(flipCard(id))    };  const resetHandler = () =gt; {  dispatch(resetUnmatchedCards)  }   let cardStyle = 'resting';    let click = () =gt; flipHandler(id);    let cardText = (  lt;img src={cardLogo} className="logo-placeholder" alt="Card option" /gt;  );   // 1st if statement  // implement card id array membership check  if (visibleIDs.includes(id) || matchedIDs.includes(id)) {      cardText = contents;  click = () =gt; {};  }     // 2nd if statement  // implement card id array membership check  if (matchedIDs.includes(id)) {     cardStyle = 'matched';    } else {   cardStyle = 'no-match';    }   // 3rd if statement  // implement number of flipped cards check  if (visibleIDs.length === 2) {  if (cardStyle === 'no-match' ) {  click = () =gt; resetHandler();   }  click = ()=gt; {};    }   return (  lt;button onClick={click} className={`card ${cardStyle}`}gt;  {cardText}  lt;/buttongt;  ); };   

итак, проблема в том, что я хочу изменить кнопку щелчка на другую функцию, чтобы сделать это, когда сначала у каждой карты был этот объект {идентификатор:идентификатор карты, содержимое: содержимое карты, видимое: ложь, совпадение: ложь}, поэтому сначала, когда пользователь нажимает на две карты действием «ФлипКарт», карта.видимое становится истинным, если первая карта.содержимое совпадает со второй картой.содержимое, поэтому свойство card.matched для двух карт станет истинным, поэтому я хочу добавить еще одну функцию для сброса двух карт.видимое становится ложным, когда первая карта.содержимое не совпадает со второй картой.содержимое, поэтому это мой код карты компонента. :

 import React, {useEffect} from 'react'; // Add import statements below  import { useSelector, useDispatch } from 'react-redux'; import { selectVisibleIDs, flipCard, selectMatchedIDs, } from '../../boardSlice'; import { resetCards, resetUnmatchedCards } from '../../boardSlice' let cardLogo = "https://static-assets.codecademy.com/Courses/Learn-Redux/matching-game/codecademy_logo.png";  export const Card = ({ id, contents }) =gt; {  // Add selected data and dispatch variables below  const visibleIDs = useSelector(selectVisibleIDs)   const dispatch = useDispatch();  const matchedIDs = useSelector(selectMatchedIDs);  console.log(matchedIDs);   // flip card action  const flipHandler = (id) =gt; {  // Add action dispatch below  dispatch(flipCard(id))    };  const resetHandler = () =gt; {  dispatch(resetCards)  }   let cardStyle = 'resting';    let click = () =gt; flipHandler(id);    let cardText = (  lt;img src={cardLogo} className="logo-placeholder" alt="Card option" /gt;  );   // 1st if statement  // implement card id array membership check  if (visibleIDs.includes(id) || matchedIDs.includes(id)) {      cardText = contents;  click = () =gt; {};  }     // 2nd if statement  // implement card id array membership check  if (matchedIDs.includes(id)) {     cardStyle = 'matched';    } else {   cardStyle = 'no-match';    } console.log(visibleIDs.every(id =gt; matchedIDs.includes(id)))  // 3rd if statement  // implement number of flipped cards check  if (visibleIDs.length === 2 ) {  if (cardStyle === 'no-match' amp;amp; visibleIDs.every(id =gt; !matchedIDs.includes(id))) {    click = () =gt; resetHandler();   } else {    click = () =gt; {};  }    }   return (  lt;button onClick={click} className={`card ${cardStyle}`}gt;  {cardText}  lt;/buttongt;  ); };