除非滚动浏览，否则开关不会在卡组件中更新

Question

问题：除非我在卡上滚动或按卡，否则Switch（toogle）组件不会更新其渲染视图（在屏幕上）。

代码：

constructor() {
        super();
        this.state = { 

            outputimg:null,
            displayedImages:[],
            pageToken:null,
            nrOfPhotosOnScreen:0,
            pageNames:null,
            authorOfThePost:null,
            visible:false,
            checked:false,
            key:0
        }
    }

这个for循环位于一个名为onComponentDidMount()的函数中，但是除了开关->

for(var k=0;k<=Object.keys(this.state.pageNames).length-1;k++){
if(firstPage.items[i].path.replace(/images\//g,'').includes(Object.keys(this.state.pageNames)[k]))
{
    let authorOfThePost = Object.values(this.state.pageNames)[k];
    let linkToPage = "https://www.instagram.com/"+authorOfThePost.replace(/@/g,'')+"/";
    let headerPost = (props) => (
        <View {...props}>
            <Text category='h6'>Posted by </Text><Text style={{color:'blue'}} category='h6' onPress={() => Linking.openURL(linkToPage)}>{authorOfThePost}</Text>
        </View>
    )
    let footerPost = (props) => (
        <View {...props} style={[props.style, styles.footerContainer]}>
            <Toggle checked={this.state.checked} key={this.state.key} onChange={this.onCheckedChange}>
            {`Checked: ${this.state.checked}`}
            </Toggle>
        </View>
    )
    let output = <Card style={styles.card} activeOpacity={1}  footer = {footerPost} header={headerPost}>{outputimg}</Card>
    this.setState({
        displayedImages: [...this.state.displayedImages, output],
        key:this.state.key+1
    });
}

onCheckedChange函数->

    onCheckedChange = () => {
        this.setState({checked:!this.state.checked})
  };

切换按钮和卡是从UI Kitten（Switch Toggle和Card Component）中导入的

How the app looks