如何在本機反應中刷新ListView Component？

Question

我試圖創建一個待辦事項列表，然后試圖使用此復選框包

反應母語 - 復選框

我不知道這個問題是否來自那個包裹

當我單擊復選框並單擊刪除按鈕時，會發生這種情況

這是我用於顯示列表的代碼

    interface TodoProps{
        todo: TodoModel;
        ter:string;
    }
    interface TodoState{
        dataSource: any;
        myTodo: Array<ITodo>;
    }

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});

    export default class Todo extends React.Component <TodoProps,TodoState>{

        constructor(props:TodoProps) {
            super(props);

            this.state = {
                dataSource: ds.cloneWithRows([]), // or put your initial data here
                myTodo: []
            };
        }

  componentWillReceiveProps = (nextProps) => {
           console.log(this.state.myTodo);
        let data = {
            title: nextProps.ter,
            isChecked: false
        };
        let todoList = this.state.myTodo;

        if (nextProps.ter) {
            todoList.push(data);
        }

        this.setState({
            myTodo: todoList
        });

    }

        onDelete(){
            let todos = this.state.myTodo.filter((todo:ITodo) => {
                 return !todo.isChecked;
             });

            this.setState({
                myTodo: todos
            });
        }

        render() {

            let dataSource = this.state.dataSource.cloneWithRows(this.state.myTodo);
            return (
                <View style={styles.container}>
                    <View style={styles.box2}>
                        <ListView enableEmptySections={true} dataSource={dataSource} renderRow={(rowData, sectionID, rowID) => <TodoList data={rowData} onClick={this.onClick.bind(this)} id={rowID} /> } />
                    </View>
                    <View style={styles.box3}>
                        <TouchableOpacity style={styles.bbox1} onPress={()=> alert('weee')}>
                            <Text style={styles.tabText}>All</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.bbox2} onPress={()=> alert('weee')}>
                            <Text style={styles.tabText}>Complete</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.bbox3} onPress={()=> alert('weee')}>
                            <Text style={styles.tabText}>InComplete</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.bbox4} onPress={()=> this.onDestroy()}>
                            <Text style={styles.tabText}>Delete</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }
    }

但是如果我控制台記錄數據。 我發現所有isChecke：都為false。 僅復選框視圖不起作用。 我是否需要為此使用componentwillamount（）？

Answer 1

使用以下示例代碼

 _onRefresh() {
    this.setState({refreshing: true});
    // your callback function or call this.componentDidMount()
  }

  render() {
    return (
      <ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >
      ...
      </ListView>
    );
  }