在父状态更改后反应子组件不重新渲染

Question

我是 React 新手，正在尝试创建一个简单的纸牌游戏。当一张卡片被点击时，它应该被选中并分配一个类名“selectedCard”。因此，当它重新渲染时，选定的卡片将被抬起。但是，选中的卡片并没有在点击时抬起，我的猜测是它没有重新渲染。

这是我的代码 sn-p：

Player.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}/>)
                }
          )}
    )
}

卡片.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

你不应该在更新状态时改变它，如果你这样做，React 在引用检查中看到你的引用是相同的，并假设没有任何改变并且不会触发重新渲染。

在更新反应状态时遵循不变性的概念。您可以使用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');
}