在父 state 更改后反應子組件不重新渲染

Question

我是 React 新手，正在嘗試創建一個簡單的紙牌游戲。 當一張卡片被點擊時，它應該被選中並分配一個類名“selectedCard”。 因此，當它重新渲染時，選定的卡片將被抬起。 但是，選擇的卡並沒有抬起 onClick，我的猜測是它沒有重新渲染。

這是我的代碼片段：

播放器.js：

const Player = (props) =>{
    const [selectedCards, setSelectCard] = useState([]);

    const selectCard = (card) => {
        let newSelectedCards = selectedCards
        if(newSelectedCards.includes(card) ) {
            newSelectedCards.splice(newSelectedCards.indexOf(card), 1)
        } else {
            newSelectedCards.push(card)
        }
        setSelectCard(newSelectedCards)
        console.log('changed');
    }


    return(
            <div className="player-container">
                {props.cards && props.cards.map((card, i) => {
                    let selected = selectedCards.includes(card)
                    return(<Card key={i} card={card} user="player" selectCard={selectCard} selected={selected}/>)
                }
          )}
    )
}

Card.js

const Card = (props) =>{
    const path = props.card.imagePath
    const [selected, setSelected] = useState(props.selected)

    useEffect(() => { setSelected(props.selected) }, [props.selected]);
    {/*My effort to make it work*/}

    const classname = (selected) ? "selectedcard" : ""
            return(
                <img onClick={() => props.selectCard(props.card)}  className={"card " + classname} alt = "card-image" src={images[path]}/>)
}

css

.selectedcard{
  margin-bottom: 40px;
  border-radius: 6px;
  box-shadow: 0px 0px 5px #fff !important;
}

Answer 1

您不應該在更新 state 時對其進行突變，如果您這樣做，React 會在參考檢查中看到您的參考是相同的，並假設沒有任何變化並且不會觸發重新渲染。

在更新 react state 時遵循不變性的概念。 您可以使用Array.prototype.slice更新它，並使用spread syntax刪除項目並使用Array.prototype.concat添加項目

const selectCard = (card) => {
    let newSelectedCards =[];
    if(newSelectedCards.includes(card) ) {
        const index = selectedCards.indexOf(card)
        newSelectedCards = [...selectedCards.slice(0, index), ...selectedCards.slice(index + 1)]
    } else {
        newSelectedCards = selectedCards.concat([card]);
    }
    setSelectCard(newSelectedCards)
    console.log('changed');
}