在父 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');
}