Javascript 当下拉列表的值更改时，如何重新渲染平面列表？

我正在从状态变量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;

import React，{Component}来自“React”；
从“react native material Dropdown”导入{Dropdown}；
从“react-
土生土长的”；
类探索扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标记：“”，
孤岛加载：是的，
数据源：[]
};
}
componentDidMount（）{
取回（“http://docbook.orgfree.com/home.php", {
方法：“获取”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
“身份验证令牌”：“我的令牌”，
},
})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据来源：responseJson，
});
if（responseJson）{
//Alert.Alert（“Id是”+JSON.stringify（responseJson））；
console.log（this.state.dataSource）
}else if（responseJson.error）{
//Alert.Alert（responseJson.error）；
}
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
const{dataSource，tag}=this.state；
const tagFilter=项目=>{
如果（标签）{
return item.tag==tag；
}
返回true；
}
让数据=[{
价值观：“教会”，
}, {
价值:"海滩",，
}, {
价值观：“庙宇”，
},{
值：'瀑布'
},
{
价值：'Town'
}];
报税表（
this.setState（{tag}）}
/>
(
{item.name}
#{item.Tag}
)}
keyExatractor={（{name}）=>name}
/>
);
}
}
导出默认值；

保存标记以按状态筛选，并在下拉组件的onChange回调中内联和简单筛选数据源。下面将从状态中分解

标记

和

数据源

，并定义一个用作数组：：过滤器回调的过滤器函数。如果

tag

为truthy，则在标记匹配时应用过滤器，否则返回true以允许项目通过，即未过滤

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>
  );
}

this.state={
文字:"庙宇",，
孤岛加载：是的，
dataSource:[]，//TypeError:undefined不是对象（正在评估dataSource.filter）@Akashkunwar您是否从状态对象中解构了
dataSource
？我将更新答案，以便更清楚地了解更改的方向。@Akashkunwar已更新。另一个注意事项是，如果数据没有
key
属性或您未指定属性，则基线数据正在更改，默认情况下，
FlatList
使用索引您可能有渲染问题，只是一个警告。希望这更清楚一点。我已经根据您所做的更改更新了代码，但仍然得到TypeError:undefined不是对象（正在评估dataSource.filter）我不认为存在任何渲染问题，因为在不同的活动中渲染效果很好。我也更新了我的问题。如果您可以查看更新的代码，这将非常有用