Rece Native FlatList Rerender from Descendant

对不起，大家好，我确实尝试过以前的问题进行研究 .

我在我的应用程序中将以下组件实现为屏幕：

class DivisionManagmementScreen extends Component {

    constructor(props) {
        super(props);

        this.state = {
            divisions: [],
            toggle: true
        };
    }

    async componentDidMount() {

        let programId = this.props.navigation.getParam("programId", 1);

        this.db = await open({name: "stats.db",createFromLocation: "~soccerstats.db"});

        const sql = "SELECT * FROM DIVISION where DIVISION_PROGRAM_ID = ? ORDER BY DIVISION_NAME";

        let result = await query(this.db, sql, [programId]); 

        this.setState({divisions: result.result});
    }

    async componentWillUnmount() {
        await close(this.db);
    }

    _renderItem = ({item}) => (
        <DivisionManagementRow divisionId={item.DIVISION_ID} divisionName={item.DIVISION_NAME} />
    );


    render() {
        return (
            <View style={styles.component}>
                <View style={styles.listArea}>
                    <FlatList 
                        data={this.state.divisions}
                        renderItem={this._renderItem}
                        keyExtractor={(item) => item.DIVISION_ID.toString() }
                        extraData={this.state.toggle}/>
                </View>
                <View style={styles.bottomButtonArea}>
                    <View style={styles.bottomButtonSection}>
                        <MenuNavigationButton label="Add Division" target="AddDivisionScreen" />
                    </View>
                </View>
            </View>
        );
    }
}

export default withNavigation(DivisionManagmementScreen);

请注意，我使用传递 this.state.toggle 作为我的FlatList extraData 参数的参数 .

下面是FlatList呈现的数据行的实现（减去样式，proptypes等）：

class DivisionManagementRow extends Component {

constructor(props) {
    super(props);

    this.state = {toggle: true};

}

_btnTeams = () => {

    // navigate to Team Management
}

_btnEditDivision = () => {
    this.props.navigation.navigate("EditDivisionScreen", {divisionId: this.props.divisionId});
}

_btnDeleteDivision = () => {

    console.log("Entered _btnDeleteDevision");
    Alert.alert(
        "Are you sure?",
        "This will delete all teams that are assigned to this division. Are you sure you want to do this?",
        [
            {text: "Cancel"},
            {text: "Ok", onPress: () => this._deleteDivision()}
        ]
    );
}

_deleteDivision = async () => {

    console.log("Entered _deleteDivision, divisionId: " + this.props.divisionId);
    const sql = "DELETE FROM DIVISION WHERE DIVISION_ID = ?";

    let divisionId = this.props.divisionId;
    let db = await open({name: "stats.db",createFromLocation: "~soccerstats.db"});
    let result = await execute(db, sql, [divisionId]);

    console.log("Rows affected: " + result.rowsAffected);

    await close(db);

    this.setState({toggle: !this.state.toggle});

}

render() {

    return (
        <View style={styles.component}>
            <Text>{this.props.divisionName}</Text>
            <View style={styles.buttonSection}>
            <TouchableOpacity style={styles.button}
                onPress={this._btnAddTeam}>
                <Text style={styles.buttonText}>Teams</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}
                onPress={this._btnEditDivision}>
                <Text style={styles.buttonText}>Edit</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}
                onPress={this._btnDeleteDivision}>
                <Text style={styles.buttonText}>Delete</Text>
            </TouchableOpacity>
            </View>
        </View>
    );
}

}

前两个“按钮”（TouchableOpacitys）工作正常，因为它们只是导航到不同的屏幕 . 但是，第三个“删除”没有屏幕;它显示一个确认操作的警报，然后在_deleteDivision（）方法中运行删除代码 . 不幸的是，该方法的执行不会强制重新呈现FlatList .

有人可以帮忙吗？