复选框不会在React Native中的状态更新时呈现

Question

我正在尝试使用一个特定的复选框来选中和取消选中。

这是父组件：

import React, { Component } from 'react';
import { View, Text, Modal, TouchableHighlight } from 'react-native'
import { loadLeagues } from '../actions'
import { connect } from 'react-redux'
import Check from './CheckBox'

class LeagueSelect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            checked: []
        }
    }
    // state = {
    //     modalVisible: false,
    //     checked: []
    // }

    setModalVisible(visible) {
        this.setState({modalVisible: visible})
        this.props.league.map(
            (v, i) => {
                return this.state.checked.push(false)
            }
        )
    }

    componentDidMount() {
        this.props.loadLeagues()
    }

    changeCheck = (index) => {
        newChecked = this.state.checked.splice(index, 1, !this.state.checked[index])
        console.log('newChecked', this.state.checked)
        this.setState({ checked: newChecked })
        console.log('league checked state', this.state.checked)
    }

    render() {
      return ( 
        <View style={{marginTop: 22}}>
              <Modal
                animationType="slide"
                transparent={false}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                Alert.alert('Modal has been closed.');
                }}
              >

                <View style={{marginTop: 100}}>

                    <TouchableHighlight
                        onPress={() => {
                            this.setModalVisible(!this.state.modalVisible);
                        }}
                    >
                        <Text>Hide Modal</Text>
                    </TouchableHighlight>
                        <Text>Leagues</Text>

                        {this.props.league === null ?'' : this.props.league.map(
                            (v, i) => {
                                return(
                                        <View>
                                            <Check
                                                checked={this.state.checked[i]}
                                                index={i}
                                                changeCheck={this.changeCheck}
                                            />
                                            <Text>{v.acronym}</Text>
                                        </View>
                                )
                            }
                        )}
                </View>
              </Modal>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(true);
                }}>
                <Text>Show Modal</Text>
              </TouchableHighlight>

            </View>
      );
    }
  }

function mapStateToProps(state) {
    return {
      league: state.league.league
     }
   }

export default connect(mapStateToProps, { loadLeagues })(LeagueSelect)

这是我要将复选框的索引传递给其进行更新的子组件；我还传递了用于更新特定索引处的复选框状态的函数：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { CheckBox } from 'native-base'


export default class Check extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cards: []
        }
    }

    localChange = () => {
        this.props.changeCheck(this.props.index)
    }

    render() {
        return(
          <CheckBox
            checked={this.props.checked}
            onPress={this.localChange}
          />
        )
    }
}

当我在已设置的控制台日志中按复选框时，我可以看到状态更新，但是该复选框不是基于新状态而更新的。