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

我试图得到一个特定的复选框来选中和取消选中

这是父组件：

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}来自'React'；
从“react native”导入{View，Text，Modal，TouchableHighlight}
从“../actions”导入{loadLeagues}
从“react redux”导入{connect}
从“./CheckBox”导入检查
类LeagueSelect扩展组件{
建造师（道具）{
超级（道具）
此.state={
modalVisible:错误，
选中：[]
}
}
//状态={
//modalVisible:错误，
//选中：[]
// }
setModalVisible（可见）{
this.setState（{modalVisible:visible}）
这个。道具。联盟。地图(
（v，i）=>{
返回此.state.checked.push（false）
}
)
}
componentDidMount（）{
this.props.loadLeagues（）
}
变更检查=（索引）=>{
newChecked=this.state.checked.splice（索引，1，！this.state.checked[index]）
console.log（'newChecked'，this.state.checked）
this.setState（{checked:newChecked}）
console.log（'league checked state'，this.state.checked）
}
render（）{
报税表（
{
警报。警报（'模式已关闭'）；
}}
>
{
this.setModalVisible（！this.state.modalVisible）；
}}
>
隐藏模态
联盟
{this.props.league===null？''：this.props.league.map(
（v，i）=>{
返回(
{v.首字母缩略词}
)
}
)}
{
此.setModalVisible（true）；
}}>
显示模态
);
}
}
函数MapStateTops（状态）{
返回{
联盟：国家联盟
}
}
导出默认连接（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}
          />
        )
    }
}

import React，{Component}来自'React'；
从“react native”导入{Text，View}；
从“本机基”导入{CheckBox}
导出默认类检查扩展组件{
建造师（道具）{
超级（道具）
此.state={
卡片：[]
}
}
localChange=（）=>{
this.props.changeCheck（this.props.index）
}
render（）{
返回(
)
}
}

---

通过我设置的控制台日志，我可以看到当按下复选框时状态会更新，但复选框不会根据新状态进行更新。

我将newChecked的这部分粘贴到setState中，它起了作用：

this.state.checked.splice（index，1，！this.state.checked[index]）

。在这种情况下，为什么不能传递变量呢？

changeCheck

中有什么内容？我将newChecked的这部分粘贴到setState中，它成功了：

this.state.checked.splice（index，1，！this.state.checked[index]）

。在这种情况下，为什么不能传递变量？

changeCheck

中有什么内容？