如何重新渲染 Flatlist React Native？

Question

我正在为 TodoList 进行搜索过滤。 在 todoList 中，我使用了一个函数来渲染名为 renderItem 的项目，但是当我在 inputText 中写入搜索项目时，我不知道如何重新渲染

有人可以帮我吗？

StaticContainer.js

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';

export default class StaticCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: '',
      name: '',
    }
    this.renderItem = this.renderItem.bind(this)
    this.setState = this.setState.bind(this)
  }
  setState(text){
    this.state.filter = text
    alert(JSON.stringify(this.state.filter))
    this.renderItem
  }
  renderItem(obj){
    if (this.state.filter != '') {
      if (obj.item.desc.startsWith(this.state.filter)) {
        console.log(typeof(obj.item.desc));
        let key = obj.item.key      
        return(
          <TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
            <Text style={styles.cel}>{obj.item.desc}</Text>
          </TouchableOpacity>
        )
      }else{

      }
    }else{
      let key = obj.item.key      
      return(
        <TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
          <Text style={styles.cel}>{obj.item.desc}</Text>
        </TouchableOpacity>
      )
    }

    }
    render() {
      return (
        <View>
          <FlatList style={styles.lista} data={this.props.itens} renderItem={this.renderItem}/>
          <TextInput style={styles.input} onChangeText={(text) =>{this.setState(text)}}/>
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      justifyContent: 'center',
    },
    lista: {
      marginTop: 90,
    },
    cel:{
      paddingVertical: 20,
      backgroundColor: '#E4EBEE',
      fontSize: 18,
      marginBottom: 2,
    },
    inputView:{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    input:{
      backgroundColor: '#fff',
      borderColor: '#ccc',
      borderWidth: 3,
      padding: 15,
      margin:20,
      color: '#3d3d3d'
    }
  });

Answer 1

您必须过滤传递给平面列表的数据

state = {todoList: props.items  } 

filterTodo = (inputText) => {
  const filteredList = this.state.todolist.filter(todo => todo.includes(inputText));
  this.setState({todolist: filteredList })
}

然后您的平面列表的数据将变为 this.state.todolist。 只是为了清楚渲染项是从数据数组中的每个数据点渲染的组件，整个列表的逻辑不应该在那里完成，如果你不想显示任何数据，它应该是三元数据道具

data={someCondition? this.props.todolist: [] }

我认为你在 flatlist data={this.props.itens} 中有错字，如果它是一个非常大的列表，你需要一个更优化的后端搜索，这将适用于一个简单的列表。