javascript - 在 React 中切换不切换所有元素

Question

因此，单击它只会将一张卡切换回来。因此，在我的函数中正确读取了切换，但我不明白为什么它没有将两张卡都翻转过来，它只会翻转我数组中位置 [1] 处的卡，而位置 [0] 仅在翻转卡片时不受影响翻转功能它翻转两张卡，但似乎当我设置数组时我遗漏了一些东西。另外，如果我尝试执行 cardChoiceId[0].setToggle(false) 之类的操作，我会收到一个类型错误，说不是函数，所以这不是解决方案，这里是代码

import bg from '../images/card-bg.png'

let cardChoiceId = []
let cardsWon = []

const GameCard = ({ img, name, num, setScore, setResult, cardArray }) => {
    const [toggle, setToggle] = useState(false)




    const checkForMatch = () => {
        if (cardChoiceId[0] === cardChoiceId[1]) {
            alert(`That's a Match`)
            setToggle(true)
            cardsWon.push(cardChoiceId)
            cardChoiceId = []
            setScore(+1)
            if (cardsWon.length === cardArray.length) {
                setResult(` Congratz!!! You Win `)
            }   
        }
        else {
            setToggle(false)
            cardChoiceId = []
        }   
    }

    const flip = () => {
        setToggle(!false)
        cardChoiceId.push(name)
        console.log(cardChoiceId)
        if (cardChoiceId.length === 2) {
            return setTimeout(checkForMatch, 500)
        }

    }



    return toggle === false ? (
            <div onClick={flip}>
                <div className='game-card-bg' >
                    <img src={bg} alt='card' style={{ width: '100%' }} />
                </div>
             </div>
            ):(
            <div>
        <div className='game-card' >
            <img src={img} alt='card' />
            <h4 className='card-name'>{name}</h4>
        </div>  
    </div>
    )

}

export default GameCard

score 0 · Accepted Answer

问题是，您尝试在本地组件状态中同时管理游戏状态，并将组件状态模式与全局状态（“cardChoiceId”等）混合。让我更清楚一点，您应该遵循关注点分离原则。

你的游戏状态应该跟踪有多少卡被切换/翻转并检查它们是否匹配。

您获得了组件的本地状态，该GameCard组件负责以任一状态（切换或非切换）呈现游戏卡。首先，您的本地状态似乎应该管理切换状态，但您的全局状态取决于切换状态，因此必须“上拉”。因此，中没有本地状态GameCard。

我宁愿建议外部组件应该告诉它它是否被翻转，并且外部组件应该提供一个回调，该组件可以使用该回调来通知外部组件有关单击事件的信息。请注意如何更容易推断每个组件发生的事情：

首先，想想卡片可以处于的状态，对我来说这将是：

const CardState = {
  HIDDEN: 0,
  FLIPPED: 1,
  WON: 2,
};

让我们假设 acardArray是一个洗牌数组，其中每个名字出现两次

[
  {
    id: 1,
    name: 'Tiger',
    img: '...',
  },
  {
    id: 2,
    name: 'Lion',
    img: '...',
  },
  {
    id: 3,
    name: 'Tiger',
    img: '...',
  },
  {
    id: 4,
    name: 'Lion',
    img: '...',
  },
  ...
]

现在，我们可以实现我们的Game逻辑，但我们并不关心如何显示卡片本身。我们只关心这里的逻辑。

const Game = ({ cardArray }) => {
  // keep track of every cards state
  const [cardState, setCardState] = useState(
    // initialize every card as HIDDEN
    cardArray.reduce((a, c) => ({
      ...a,
      [c.id]: {
        ...c, // all card info
        state: CardState.HIDDEN, // add state
      },
    }, {})
  );

  // set the new state of a specific card
  const updateState = (id, newState) => setCardState(prev => {
    ...prev, // keep state of all cards
    [id]: {
      ...prev[id],
      state: newState, // update state of id
    },
  });

  // check if all cards are WON
  const checkGameOver = () => {
    const notWonCard = Object.values(cardState)
      .find(card => card.state !== CardState.WON);
    if (!notWonCard /* ===  all won*/) {
      alert(` Congratz!!! You Win `);
    }
  };

  // checks if two FLIPPED cards match and if so, set them both WON, in this case also trigger a checkGameOver
  const checkForMatch = () => {
    const flippedCards = Object.values(cardState)
      .filter(card => card.state === CardState.FLIPPED);
    if (flippedCards.length === 2) {
      if (flippedCards[0].name === flippedCards[1].name) {
        alert(`That's a Match`);
        updateState(flippedCards[0].id, CardState.WON);
        updateState(flippedCards[1].id, CardState.WON);
        setTimeout(checkGameOver, 500);
      }
    }
  };

  // update the state of a card depending on its current state and trigger checkForMatch
  const onCardClick = id => {
    switch (cardState[id].state) {
      case CardState.FLIPPED: {
        updateState(id, CardState.HIDDEN);
        break;
      }
      case CardState.HIDDEN: {
        updateState(id, CardState.FLIPPED);
        setTimeout(checkForMatch, 500);
        break;
      }
      case CardState.WON: 
        // fallthrough
      default: {
        // noop
      }
    }
  };

  return (
    <div>
      {cardArray.map(card => (
        <GameCard
          key={card.id}
          name={card.name}
          img={card.img}
          isFlipped={
            cardState[card.id] === CardState.FLIPPED
              || cardState[card.id] === CardState.WON
          }
          onClick={() => onCardClick(card.id)}
        />
      ))}
    </div>
  );
}

现在逻辑已经完成，我们可以不用思考实际的卡片应该如何渲染：

import bg from '...';
const GameCard = ({ name, img, isFlipped, onClick }) => (
  isFlipped
  ? (
    <div>
      <div className='game-card' >
        <img src={img} alt='card' />
        <h4 className='card-name'>{name}</h4>
      </div>  
    </div>
  ) : (
    <div onClick={onClick}>
      <div className='game-card-bg' >
        <img src={bg} alt='card' style={{ width: '100%' }} />
      </div>
    </div>
  )
);

它不是经过测试的代码，而是应该给你一个关注点分离的想法。

score 0 · Accepted Answer

我只能提供工作代码，认为这是另一个答案...很抱歉，这就是为什么确保您立即在这样的公共论坛上回答问题很重要的原因...但是这里的工作代码不是确定我是如何解决它的，稍后我有更多时间时可能会编辑它....

板逻辑

  const [cards, setCards] = useState(props.cards)
  const [checkers, setCheckers] = useState([])
  const [completed, setCompleted] = useState([])
  const onCardClick = card => () => {
    if (checkersFull(checkers) || cardAlreadyInCheckers(checkers, card)) return
    const newCheckers = [...checkers, card]
    setCheckers(newCheckers)
    const cardsInCheckersMatched = validateCheckers(newCheckers)
    if (cardsInCheckersMatched) {
      setCompleted([...completed, newCheckers[0].type])
    }
    if (checkersFull(newCheckers)) {
      resetCheckersAfter(1000)
    }
    function validateCheckers(checkers){
      return checkers.length === 2 &&
      checkers[0].type === checkers[1].type
    }
    function cardAlreadyInCheckers(checkers, card){
      return checkers.length === 1 && checkers[0].id === card.id
    }
    function checkersFull(checkers){
      return checkers.length === 2
    }
    function resetCheckersAfter(time) {
      setTimeout(() => {
        setCheckers([])
      }, time)
    }
  }

  useEffect(() => {
    const newCards = cards.map(card => ({
      ...card,
      flipped:
        checkers.find(c => c.id === card.id) ||
        completed.includes(card.type),
    }))
        setCards(newCards)
        //eslint-disable-next-line
  }, [checkers, completed])

  return (
    <div className="Board">
      {cards.map(card => (
        <Card {...card} onClick={onCardClick(card)} key={card.id} />
      ))}
    </div>
  )
}

卡片逻辑

    const images = {duck, pig, horse, cat, dog, dolphin, fish, roo, lion, frog }
    const cards = Object.keys(images).reduce((result, item) => {
        const getCard = () => ({
            id: id++,
            type: item,
            backImg,
            frontImg: images[item],
            flipped: false,
        })
        return [...result, getCard(), getCard()]
    }, [])
    return shuffle(cards)
}

const shuffle=(arr) =>{
    let len = arr.length
    for (let i = 0; i < len; i++) {
        let randomIdx = Math.floor(Math.random() * len)
        let copyCurrent = { ...arr[i] }
        let copyRandom = { ...arr[randomIdx] }
        arr[i] = copyRandom
        arr[randomIdx] = copyCurrent
    }
    return arr
}
    const cards = buildCards()````

javascript - 在 React 中切换不切换所有元素

2 回答 2

Related

Reference