후손의 기본 FlatList 렌더링 반응

죄송합니다, 여러분, 나는 이전 질문에 대한 연구를 시도했습니다.

응용 프로그램에서 다음 구성 요소를 화면으로 구현했습니다.

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는 컴포넌트 {를 확장합니다.

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를 다시 렌더링 할 수는 없습니다.

누구 도와 드릴까요?