更改列表中“切换”元素的样式，本地反应

Question

我在更改列表中只有一个元素的样式时遇到了麻烦。下面是我的Main类，以及StationDetails类，它是我创建的用于逐个呈现列表元素的组件。

在qazxsw poi中有一条线（第31行）我似乎无法弄清楚问题。我想根据元素的ID是否包含在qazxsw poi列表中来设置组件的样式。

这是一行：

StationDetails

这是我的activeStations课程

 style={activeStations.includes(stations.id) ? pressedStyle : buttonStyle}

这是我的Main组件。

import React, { Component } from "react"
import axios from "axios"
import { Text, View, ScrollView } from "react-native"
import StationDetails from "./StationDetails"

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = { stations: [], pressStatus: false, activeStations: [] }
    this.handleClick = this.handleClick.bind(this)
  }

  componentWillMount() {
    axios
      .get("https://api.citybik.es/v2/networks/trondheim-bysykkel")
      .then(response =>
        this.setState({ stations: response.data.network.stations })
      )
  }

  handleClick() {
    this.setState({ pressStatus: !this.state.pressStatus })
  }

  renderStations() {
    return this.state.stations.map(stations => (
      <StationDetails
        activeStations={this.state.activeStations}
        handleClick={this.handleClick}
        pressStatus={this.state.pressStatus}
        key={stations.id}
        stations={stations}
      >
        {stations.name}
      </StationDetails>
    ))
  }

  render() {
    return (
      <ScrollView style={{ flex: 1, marginTop: 20 }}>
        {this.renderStations()}
      </ScrollView>
    )
  }
}

export default Main