如何設置 state 以切換 boolean 值，該值位於 JSON ZA8CFDE6331149EB2AC96B8 數組中？

Question

我今天一直堅持這個問題，我嘗試了幾種可能的解決方案，但都沒有解決這個問題。

這是我正在為團隊的個人資料頁面創建的翻牌效果。 當用戶單擊個人資料卡時，它會翻轉卡片以在背面顯示更多信息。 我目前設置的方式是在觸發 onClick 時一次性翻轉所有卡片，而不是單個卡片。 I know by doing that I need to set the current state of isTrue to render the boolean value from the JSON object, and I tried several possible ways I could think of with no succession.

如果有人能幫助我學習/理解如何解決這個問題，我將不勝感激！

這是簡化的示例代碼：

JSON object：

data: [
  { id: 1, isTrue: false },
  { id: 2, isTrue: false },
  { id: 3, isTrue: false},   
  ...
]

反應組件：

import exampleData from 'data.js'
class App extends Component {
  constructor () {
    super()
    this.state = {
       isTrue: //I need to set the current state of isTrue to render from exampleData, but couldn't figure out how to do it.//
    }
    this.handleToggle = this.handleToggle.bind(this);
  }
  handleToggle (e) {
    e.preventDefault();
    this.setState(prevState => ({
      isTrue: !prevState.isTrue
    }))
  }
render() {
  return(
        <div className="App">
         {exampleData.data.map((obj) => {
           return <ReactCardFlip isTrue={this.state.isTrue}/>
             <button onClick={handleToggle}>Flip the card</div>
           </ReactCardFlip>
          })
        </div>
    );
  }
}
export default App;

Answer 1

主要是每個item都應該有自己的isTure

所以單 state isTrue無法滿足您的需求。

兩種方式：

• exampleData中的state
• isTure => arrIsTrue對應exampleData中的每一項

---

data: [
  { id: 1, isTrue: false },
  { id: 2, isTrue: false },
  { id: 3, isTrue: false},   
  ...
]

這些數據可以放在state

像之后： this.state = { exampleData: exampleData.data }

所以render可以是<ReactCardFlip isTrue={obj.isTrue}/>

handleToggle也應該獲得當前的切換索引到之后：

<div className="App">
  {this.state.exampleData.map((obj, index) => {
    return <ReactCardFlip key={index} isTrue={this.state.isTrue}/>
      <button onClick={() => handleToggle(index)}>Flip the card</div>
    </ReactCardFlip>
  })
</div>

然后在handleToggle中為：

handleToggle (index) {
  const exampleData = this.state.exampleData
  exampleData[index] = !exampleData[index].isTrue
  this.setState({ exampleData: exampleData })
}

畢竟別忘了key

Answer 2

您需要將externalData存儲在組件的 state 中。 使用map渲染此列表，並將當前點擊的卡片傳遞給toggle方法。 在此之后，您可以根據單擊的元素更改 state。 請參見下面的示例：

import exampleData from 'data.js'

class App extends Component {
  constructor () {
    super()
    this.state = {
       cards: [],
    }
    this.handleToggle = this.handleToggle.bind(this);
  }

  componentDidMount() {
    this.state.setState({ cards: exampleData });
  }

  handleToggle (card) {
    this.setState(prevState => ({
      cards: prevState.cards.map(prevCard => {
        if (prevCard.id === card.id) {
          return {
            id: prevCard.id,
            isTrue: !prevCard.isTrue
          }
       }

       return prevCard;
    })}));
  }

  render() {
    return (
      <div className="App">
       {this.state.data.map((card) => {
         return (
           <ReactCardFlip isTrue={card.isTrue}>
             <button onClick={() => this.handleToggle(card)}>Flip the card</button>
           </ReactCardFlip>
         )
       })}
      </div>
    );
  }
}
export default App;