Кнопка фильтра с реагировать родной

Question

Я хотел бы создать кнопку для фильтрации некоторых данных

Я вижу все, что хочу, и могу использовать фильтр для "componentDidMount () setData"

Я бы использовал свою функцию для "TouchableOpacity onPress = {this.buttonFilterMac}" *

Конструктор:

constructor(props) {
super(props)
this.state = {
  data: []
}

}

Мои данные:

  componentDidMount() {
const url = 'https://next.json-generator.com/api/json/get/V1geuzIDB'
fetch(url)
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
       data: responseJson.Employe
     // data: responseJson.Employe.filter(x => x.Prenom == 'Abrahim')
    })
  })
  .catch((error) => {
    console.log('====================================');
    console.log(error);
    console.log('====================================');
  })
}

Моя функция

 buttonFilterMac({ item }){
      data: responseJson.Employe.filter(x => x.Prenom == 'Abrahim')
}

Моя кнопка с изображением

<TouchableOpacity onPress={this.buttonFilterMac}>
 <Image
   source={button1}
   style={{ width: 160, height: 18 }}
   resizeMode="contain"
   //style={styles.image_car}
 />

большое спасибо за вашу помощь

Answer 1

При получении необходимо установить список данных:

this.setState({ data: responseJson.Employe })

Когда вы нажимаете фильтр, вам нужно снова установить состояние с отфильтрованными данными в родере, чтобы увидеть изменения в вас Component:

buttonFilterMac = () => {
  this.setState({ data: this.state.data.filter(x => x.Prenom === 'Abrahim') })
}

Однако помните, что при настройке отфильтрованных данных те, которые не включены в отфильтрованные данные, будут потеряны. Поэтому, возможно, вы могли бы установить исходные данные в локальной переменной после выборки или в состоянии. Тогда вы могли бы работать с этим позже.

Пример массива данных для FlatList:

render() {
  const data = this.state.filteredData || this.state.originalData;
  return <FlatList data={data} />;
}

С помощью кнопки фильтра вы можете включить / выключить фильтр, имейте в виду, что для сброса this.state.filteredData отображается this.state.originalData.