>

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

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

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

누구 도와 드릴까요?


  • 답변 # 1

    쿼리하는 데이터 배열에서 레코드를 삭제하므로 항목을 가져 오거나 쿼리하고 상태를 업데이트하여 FlatList 가 필요합니다  새 항목을 보여줍니다. 이를 위해 아래 단계를 수행하면됩니다.

    <올>

    componentDidMount 에서 쿼리 기능을 제거하십시오.  라이프 사이클 메소드를 별도의 함수로 보낸 다음 componentDidMount 에서 해당 함수를 호출하십시오.

    DivisionManagementRow 에 재산을 전달 . 이 속성에 기능을 할당하십시오.

    이 함수에서 전달한 쿼리 함수를 다시 실행하십시오.

    항목을 성공적으로 삭제 한 후이 기능을 실행하십시오.

    샘플(단순화를 위해 일부 부품 제거)

    class DivisionManagmementScreen extends Component {
      componentDidMount() {
        this.db = await open({name: "stats.db",createFromLocation: "~soccerstats.db"});
        this.fetchItems()
      }
      async componentWillUnmount() {
        await close(this.db);
      }
      fetchItems = () => {
        let programId = this.props.navigation.getParam("programId", 1);
        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});
      }
      _renderItem = ({item}) => (
        <DivisionManagementRow 
          divisionId={item.DIVISION_ID} 
          divisionName={item.DIVISION_NAME}
          onDelete={this.fetchItems}
        />
      )
      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>
        )
      }
    }
    
    
    <시간>
    _deleteDivision = async () => {
      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]);
      await close(db);
      this.setState({toggle: !this.state.toggle}, () => {
        this.props.onDelete(); // running passed down function
                               // after state set   
      });
    }
    
    

관련 자료

  • 이전 php - NGINX 이미지가 표시되지 않습니다
  • 다음 content management system - contao 뉴스 세부 사항 페이지 URL 생성 문제