Как мне установить состояние для переключения логического значения, которое находится внутри массива объекта 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

Основным является то, что каждый элемент должен иметь свой собственный 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