Как вызвать renderRow в ListView?

Question

Я использую ListView в реакции-родной. И я хочу обновить ListView функцией, поэтому я использовал this.setState вот так.

<Button onPress={()=>this.setState({word:this.state.word})}>Btn</Button> 

И после того, как нажать кнопку, render() метод работает, но renderRow метод не работает. Таким образом, ListView не работает. Как я могу это решить?

Вот мой ListView

<ListView 
    datasource={this.state.dataSource} 
    renderRow={this._renderRow.bind(this)}/> 

и мой _renderRow

_renderRow(param){ 
    return(
     <View>{param.word.includes(this.state.word)&&<Text>{param.word}</Text>}</View> 
    ); 
} 

Я хочу обновить ListView, когда я нажимаю кнопку, и появляется список, который включает в себя param.word this.state.word

Answer 1

renderRow запускается при обновлении DataSource для ListView. Поэтому кажется, что ваша кнопка должна обновить this.state.dataSource, а не this.state.word.

От: https://facebook.github.io/react-native/docs/listview.html

В конструкторе, вы должны инициализировать DataSource:

constructor() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
    dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
    }; 
} 

Затем вы можете зарегистрировать DataSource с ListView:

render() { 
    return (
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <Text>{rowData}</Text>} 
    /> 
); 
} 

Когда ваши данные изменения , вы можете обновить DataSource:

onDataChanged(newData) { 
    var ds = this.state.dataSource.cloneWithRows(newData); 
    this.setState({dataSource: ds}); 
} 

Это вызовет функцию renderRow.

Answer 2

Не пропустите запрос cloneWithRows для требуемого свойства ListViewDataSource компонента ListView. Documentation говорит:

Чтобы обновить данные в источнике данных, используйте cloneWithRows (или cloneWithRowsAndSections, если вы заботитесь о разделах). Данные в источнике данных неизменяемы, поэтому вы не можете изменять его напрямую. Методы клонирования всасывают новые данные и вычисляют diff для каждой строки, поэтому ListView знает, следует ли ее повторно отображать или нет.

Если инициализируется DataSource в конструкторе:

constructor(props) { 
    var ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2}); 
    this.state = { datasource: ds.cloneWithRows(['A', 'B', 'C']) }; 
} 

Ваша функция обновления может выглядеть следующим образом:

fetchData() { 
    //... fetching logic 
    var items = ['D', 'E', 'F']; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(items) 
    }); 
}