如何设置状态以切换位于 JSON 对象数组内的布尔值？

Question

我今天一直坚持这个问题，我尝试了几种可能的解决方案，但都没有解决这个问题。

这是我正在为团队的个人资料页面创建的翻牌效果。当用户单击个人资料卡时，它会翻转卡片以在背面显示更多信息。我目前设置的方式是在触发 onClick 时一次性翻转所有卡片，而不是单个卡片。我知道通过这样做我需要设置 isTrue 的当前状态以从 JSON 对象呈现布尔值，并且我尝试了几种我能想到的可能的方法，但没有继承。

如果有人能帮助我学习/理解如何解决这个问题，我将不胜感激！

这是简化的示例代码：

JSON对象：

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

您需要存储externalData组件的状态。使用渲染此列表map并将当前单击的卡片传递给该toggle方法。在此之后，您可以根据单击的元素更改状态。请参见下面的示例：import exampleData from 'data.js'class App extends Component {&nbsp; constructor () {&nbsp; &nbsp; super()&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp;cards: [],&nbsp; &nbsp; }&nbsp; &nbsp; this.handleToggle = this.handleToggle.bind(this);&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.state.setState({ cards: exampleData });&nbsp; }&nbsp; handleToggle (card) {&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; cards: prevState.cards.map(prevCard => {&nbsp; &nbsp; &nbsp; &nbsp; if (prevCard.id === card.id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: prevCard.id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isTrue: !prevCard.isTrue&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;return prevCard;&nbsp; &nbsp; })}));&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp;{this.state.data.map((card) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<ReactCardFlip isTrue={card.isTrue}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button onClick={() => this.handleToggle(card)}>Flip the card</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ReactCardFlip>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp;})}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;

Answer 2

主要是每个项目都应该有自己的 isTure所以单一状态isTrue无法满足你的需求。两种方式：exampleData 在 stateisTure=>arrIsTrue对应每个项目exampleDatadata: [&nbsp; { id: 1, isTrue: false },&nbsp; { id: 2, isTrue: false },&nbsp; { id: 3, isTrue: false},&nbsp; &nbsp;&nbsp; ...]这些数据可以放在 state像之后： this.state = { exampleData: exampleData.data }所以render可以<ReactCardFlip isTrue={obj.isTrue}/>也handleToggle应该得到当前的切换索引到之后：<div className="App">&nbsp; {this.state.exampleData.map((obj, index) => {&nbsp; &nbsp; return <ReactCardFlip key={index} isTrue={this.state.isTrue}/>&nbsp; &nbsp; &nbsp; <button onClick={() => handleToggle(index)}>Flip the card</div>&nbsp; &nbsp; </ReactCardFlip>&nbsp; })</div>然后handleToggle成为：handleToggle (index) {&nbsp; const exampleData = this.state.exampleData&nbsp; exampleData[index] = !exampleData[index].isTrue&nbsp; this.setState({ exampleData: exampleData })}毕竟别忘了 key