当下拉列表的值发生变化时，如何重新渲染 Flatlist？

Question

我正在状态变量 this.state.dataSource

中的 Componentdidmount 中的数据库中获取一个数组

componentDidMount(){

    fetch("http://docbook.orgfree.com/home.php", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "auth-token": "my token",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson, 

        });
        if (responseJson) {
          Alert.alert("Id is" + JSON.stringify(responseJson)); 
        // this.state.dataSource = this.state.dataSource.filter(x => x.Tag === this.state.text);
        // console.log(this.state.dataSource[0])
         
        } else if (responseJson.error) {
          Alert.alert(responseJson.error);
        }
      })

      .catch((error) => {
        console.error(error);
      });

    
}

this.state.Datasource 包含如下数组：

[ { 描述：“kjs”，标签："海滩", 名称：“nkslk”，地点：“kdlk”，图片：“kgmls” }, { 描述：“knsldk”，标签："俱乐部", 名称：“nklf”，地点：“dlk”，图片：“nkxn” }, ]

我有一个下拉列表，其中包含数据库中不同标签的值，例如海滩、俱乐部、寺庙、堡垒等

我只想呈现我的平面列表中的那些项目，其标签与我的数组中的标签匹配，并且当下拉值更改时我想将我的平面列表重新呈现为具有新标签的数组元素

我的完整源代码：

import React, { Component } from "react";
import { Dropdown } from 'react-native-material-dropdown';
import { Button, View, Text, StyleSheet, Image ,Alert,FlatList} from "react- 
native";
class explore extends Component {
    constructor(props) {
       super(props);
        this.state = {
        tag: '',
       isLoading:true,
       dataSource:[]
    };
}

componentDidMount(){

    fetch("http://docbook.orgfree.com/home.php", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "auth-token": "my token",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson, 

        });
        if (responseJson) {
          // Alert.alert("Id is" + JSON.stringify(responseJson)); 
          console.log(this.state.dataSource)
         
        } else if (responseJson.error) {
          // Alert.alert(responseJson.error);
        }
      })

      .catch((error) => {
        console.error(error);
      });

    
}

render() {
    const { dataSource, tag } = this.state;

    const tagFilter = item => {
          if (tag) {
            return item.tag === tag;
          }
          return true;
    }
    let data = [{
      value: 'Church',
    }, {
      value: 'Beach',
    }, {
      value: 'Temple',
    },{
      value:'Waterfall' 
    },
    {
      value:'Town'
    }];
    
return (    
      <View>
        <Dropdown
            label='TAG'
            data={data}
            onChangeText={tag => this.setState({ tag })}
        />
        <FlatList
          data={dataSource.filter(tagFilter)}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => (
            <View >
              <Text >{item.name}</Text>
              <Text >#{item.Tag}</Text>

             
            </View>
          )}
          keyExatractor={({ name }) => name}
        />


      </View>

);
}
}
export default explore;

Answer 1

在状态中保存要过滤的标签，并简单地过滤您的数据源，而不是在下拉组件的 onChange 回调中内联。以下从状态中解构 tag 和 dataSource，并定义一个过滤器函数以用作 array::filter 回调。如果 tag 为真，则在标签匹配时应用过滤器，否则 return 为真以允许项目通过，即未过滤。

this.state = {
  text: 'Temple',
  isLoading: true,
  dataSource: [], // <-- provide defined initial state
  tag: '', // <-- tag
};

...

render() {
  let data = [{
      value: 'Church',
    }, {
      value: 'Beach',
    }, {
      value: 'Temple',
  }];

  const { dataSource, tag } = this.state; // <-- destructure

  const tagFilter = item => { // <-- filter callback
    if (tag) {
      return item.tag.toLowerCase() === tag.toLowerCase(); // <-- compare using lowercase!
    }
    return true;
  }

  return (    
    <View>
      <Dropdown
        label='TAG'
        data={data}
        onChangeText={tag => this.setState({ tag })} // <-- save tag to state
      />
      <FlatList
        data={dataSource.filter(tagFilter)} // <-- filter data
        ItemSeparatorComponent={this.FlatListItemSeparator}
        renderItem={({ item }) => (
          <View >
            <Text >{item.name}</Text>
            <Text >#{item.Tag}</Text>
          </View>
        )}
      />
    </View>
  );
}

当下拉列表的值发生变化时，如何重新渲染 Flatlist？

How do you re-render Flatlist when value of dropdown list changes?

javascript

reactjs

react-native

expo

react-native-flatlist