在列表视图中创建一个搜索栏

Question

我在列表视图中创建一个搜索栏，其中包含多种类型的食物列表，此搜索栏可以过滤结果。

当我搜索一个特定的食物，并选择这个食物，如果我删除搜索栏另一个食物被选中。

你可以看到这个问题在这个GIF： https://giphy.com/gifs/3oKIPpagpRTfnuA9vW

我怎样才能解决这个问题？

代码：

class ListFood extends Component { 

    constructor() { 
     super(); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
     ds: ds, 
     dataSource: ds.cloneWithRows(dataDemo), 
     rawData: dataDemo, 
     }; 
    } 

    setSearchText(event) { 
    let searchText = event.nativeEvent.text; 
    this.setState({searchText}); 
    data = dataDemo 

    let filteredData = this.filterNotes(searchText, data); 
    ds = this.state.ds; 

    this.setState({ 
     dataSource: ds.cloneWithRows(filteredData), 
     rawData: data, 
    }); 

    } 

    filterNotes(searchText, notes) { 
     let text = searchText.toLowerCase(); 

     return notes.filter((n) => { 
     let note = n.toLowerCase(); 
     return note.search(text) !== -1; 
     }); 
    } 

    render() { 
     return (
     <View> 
      <TextInput 
      value={this.state.searchText} 
      onChange={this.setSearchText.bind(this)} 
      /> 
      <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(data) => <Row state={this.state.CheckBoxState} data={data} />} 
      /> 
     </View> 

    ); 
    } 
} 

行：

class Row extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { checked: false }; 
    } 

    render() { 
    return (
     <View´> 
     <CheckBox 
      onPress={() => this.setState({ 
      checked: !this.state.checked 
      })} 
      checked={this.state.checked} 
     /> 
     <Text> 
      { this.props.data } 
     </Text> 
     </View> 
    ); 
    } 
} 

Answer 1

之前在没有正确检测到行更改我有同样的问题。每当我有新数据时，我都会通过初始化数据源来做一个解决方法。

所以尝试像

setSearchText(event) { 
    let searchText = event.nativeEvent.text; 
    this.setState({searchText}); 
    data = dataDemo 

    let filteredData = this.filterNotes(searchText, data); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.setState({ 
     dataSource: ds.cloneWithRows(filteredData), 
     rawData: data, 
    }); 

    }