React Nativeの練習で詰まっています

Question

React Nativeの練習として、複数のボタンがありボタンを押すと対応したデータをsetState()で更新してStyleを切り替え、そのボタンの色が変化するようなアプリを作っています。
コードは以下です。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';

//Gameコンポーネント
export default class Game extends Component {
  constructor(props) {
    super(props);
    //ボタンの色を決めるフラグ
    this.state = {data: initialData};
  }
  
  //ボタンが押された際の処理(対応するフラグをfalseにセットする)
  _onPress(num) {
    let data = Array.from(this.state.data);
    idx = 'box' + num.toString();
    data.idx = false;
    this.setState({
      data: data,
    });
  }

  render() {
    return (
      <View style={styles.row}>

        <View style={styles.box}>
          <TouchableHighlight key='box1' onPress={ () => this._onPress(1)} style={this.state.data.box1 ? styles.box2 : styles.box3}>
            <Text>a</Text>
          </TouchableHighlight>
        </View>

        <View style={styles.box}>
          <TouchableHighlight key='box2' onPress={ () => this._onPress(2)} style={this.state.data.box2 ? styles.box2 : styles.box3}>
            <Text>a</Text>
          </TouchableHighlight>
        </View>

        <View style={styles.box}>
          <TouchableHighlight key='box3' onPress={ () => this._onPress(3)} style={this.state.data.box3 ? styles.box2 : styles.box3}>
            <Text>a</Text>
          </TouchableHighlight>
        </View>

        <View style={styles.box}>
          <TouchableHighlight key='box4' onPress={ () => this._onPress(4)} style={this.state.data.box4 ? styles.box2 : styles.box3}>
            <Text>a</Text>
          </TouchableHighlight>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  box: {
    width: 65,
    height: 65,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: 'steelblue',
  },
  box2: {
    width: 60,
    height: 60,
    backgroundColor: 'powderblue',
  },
  box3: {
    width: 60,
    height: 60,
  },
});

const initialData = {
  box1: true,
  box2: true,
  box3: true,
  box4: true,
}

AppRegistry.registerComponent('Game', () => Game);

このコードだと、最初の表示は正しくされるのですが、一つのボタンを押した瞬間に全てのボタンが同時にfalseの状態になってしまう現象が起こっており、解決方法を教えていただきたいです。初心者なので良いコードとなっておらずすみません。

Answer 1

    let data = Array.from(this.state.data);

ここですが、 data は Array ではなく Object ではないでしょうか ?

    let data = { ...this.state.data }

とするといかがですか ?

Comments

[namenamenameko]

その通りでした。
ミスを見つけていただきありがとうございます！

Answer 2

_onPress メソッドの中のこの行ですが、

data.idx = false;

たぶんこうでしょうか ?

data[idx] = false;

Comments

[namenamenameko]

その書き方も試しましたが全く同じ動作になってしまいます。

[januswel]

となると `setState` 前後で意図した値になっているか、 `console.log` を埋め込みながら Remote debug してみるとよいでしょう
`setState` が意図どおりであれば次は JSX 側を確認、という流れですね

https://facebook.github.io/react-native/docs/debugging.html

[namenamenameko]

ありがとうございます。
```JavaScript
_onPress(num) {
...
console.log(this.state.data);
}

componentDidUpdate() {
console.log(this.state.data);
}
```
のように２箇所でdebugしましたが、結果は(box1を押したとき)

5:20:26 PM: {"box1":true,"box2":true,"box3":true,"box4":true}
5:20:26 PM: []

のようにbox1がfalseになっておらず、しかもrender後にthis.state.dataが[]になるということになってしまっています、、、
原因を調べて見ますがもしお分かりの方がいらっしゃれば教えていただきたいと思います。