홈>
죄송합니다, 여러분, 나는 이전 질문에 대한 연구를 시도했습니다.
응용 프로그램에서 다음 구성 요소를 화면으로 구현했습니다.
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
관련 자료
- javascript - 마커를 누르면 네이티브 맵이 다시 렌더링됩니다
- 기본 스크롤을 플랫리스트 onChangeText의 맨 위로 반응
- reactjs - 반응 네이티브의 FlatList가 렌더링되지만 텍스트가 표시되지 않음
- React native flatlist - react 네이티브 플랫리스트 - 보낸 메시지와받은 메시지 구분
- javascript - React Native에서 Flatlist를 사용하여 데이터가 렌더링되지 않습니다
- React Native Flatlist는 다른 페이지로 이동
- 기본 반응은 FlatList 항목의 일부를 조건부로 렌더링합니다
- 네이티브 반응 FlatList로 작업하기 위해 목록이 포함 된 객체로 목록을 전달하는 방법은 무엇입니까?
- javascript - null을 돌려주는 경우 네이티브 플랫리스트에 반응
- javascript - 순수 구성 요소의 React Native 업데이트 FlatList 데이터
- reactjs - React Native에서 플랫리스트의 매개 변수 업데이트
- 반응 네이티브 - 전화 번호가 업데이트되지 않고 계속 오류 메시지가 표시됨
- 여러 줄의 텍스트를 줄 바꿈하여 기본 텍스트를 반응시키는 방법
- javascript - React Native에 사진을 배치 할 수 없습니다
- React Native는 안드로이드에서 올바른 상태 표시 줄 높이를 얻습니다
- reactjs - NavigationOptions 내부의 setstate 호출
- javascript - 반응 네이티브에서 형제에서 형제로 상태를 보내거나 전달하는 방법은 무엇입니까?
- javascript - 사용자가 실시간 데이터베이스에 이미 존재하는 경우 기본 Firebase 검사에 반응
- typescript - 네이티브 SectionList 렌더링의 부정확 한 반응
- node.js - 반응 기본 웹보기에서 웹 사이트 CSS를 어떻게 사용자 정의합니까?
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
쿼리하는 데이터 배열에서 레코드를 삭제하므로 항목을 가져 오거나 쿼리하고 상태를 업데이트하여
<올>FlatList
가 필요합니다 새 항목을 보여줍니다. 이를 위해 아래 단계를 수행하면됩니다.componentDidMount
에서 쿼리 기능을 제거하십시오. 라이프 사이클 메소드를 별도의 함수로 보낸 다음componentDidMount
에서 해당 함수를 호출하십시오.DivisionManagementRow
에 재산을 전달 . 이 속성에 기능을 할당하십시오.이 함수에서 전달한 쿼리 함수를 다시 실행하십시오.
항목을 성공적으로 삭제 한 후이 기능을 실행하십시오.
샘플(단순화를 위해 일부 부품 제거)
<시간>