如何设置状态以切换位于 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 {

  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;

Answer 2

主要是每个项目都应该有自己的 isTure

所以单一状态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