点击

Question

checkCard(cardName, index) {
        const item = {
            name: cardName,
            indexNumber: index
        }; 
        
        // check the part where you should look at
        const newFlipStatus = this.state.flipped[index];

        this.setState({
            tempArray: [...this.state.tempArray, item],
            flipped: !newFlipStatus
        }, () => {
            this.cardCounter(this.state.tempArray)
        });
    }

render() {
        return (
            <ul>
                <button onClick={() => this.shuffleCard()}>Click</button>
                {this.state.cardArray.map((items, index) => (
                    <li className={this.state.flipped ? 'card' : 'card true'} key={index} onClick={() => this.checkCard(items, index)}>{items}</li>
                ))}
            </ul>
        )
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在这种情况下，用户单击特定的卡片时，会出现一个特定的元素，但是我现在遇到的问题是它遍历所有元素并全部更改。

https://codeshare.io/5O0M7j

Answer 1

this.state = {
        memoryCards: ['mario', 'luigi', 'browser', 'peach', 'wario', 'toad', 'yoshi', 'bowser-junior', 'waluigi', 'diddy-kong-jr' ],
        cardArray: [],
        newArray: [],
        tempArray: [],
        arrayHere: [],
        count: 0,
        score: 0,
        flipped: false
    }

您只有一个flipped属性，它代表整个牌组。这是您要签入的属性：

<li className={this.state.flipped ? 'card' : 'card true'} 

因此，当您单击它时，便会更新状态，但是此状态属性将在所有卡上使用，因此所有li元素都将获得card类名。

您的支票：

const newFlipStatus = this.state.flipped[index];

也将返回false，因为您一开始就将其定义为布尔值。然后分配它，这是正确的。

flipped: !newFlipStatus

---

如果将翻转状态更新为对象：

this.state = {
  flipped: {}
  ...
}

您可以更新渲染功能以检查“翻转对象”上与卡片索引相关的属性：

<li className={this.state.flipped[index] ? 'card' : 'card true'}....

然后在您的checkCard函数中，您可以检查是否可以翻转值并将其重新分配给翻转对象：

this.setState(state => ({
  tempArray: [...state.tempArray, item],
  flipped: {
    ...state.flipped,
    [index]: !state.flipped[index]
  }
}), () => {
  this.cardCounter(this.state.tempArray)
});