Reactjs React本机钩子搜索筛选器平面列表

我正在尝试制作一个Covid19的本地Expo应用程序。它包含一个搜索过滤器，用户将从中选择一个国家，然后向用户显示所选国家的结果。我一直在我的Android设备上收到这个错误，当你在网络包上加载国家时，他们没有正确过滤

工作小吃链接：

这是我的密码：

import React, { useState, useEffect } from "react";
import {
  ActivityIndicator,
  Alert,
  FlatList,
  Text,
  StyleSheet,
  View,
  TextInput,
} from "react-native";

export default function ABCDEE() {
  const [arrayholder, setArrayholder] = useState([]);
  const [text, setText] = useState("");
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchAPI = () => {
    return fetch("https://api.covid19api.com/countries")
      .then((response) => response.json())
      .then((responseJson) => {
        setData(responseJson);
        setLoading(false);
        setArrayholder(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  useEffect(() => {
    fetchAPI();
  });

  const searchData = (text) => {
    const newData = arrayholder.filter((item) => {
      const itemData = item.Country.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });

    setData(newData);
    setText(text);
  };

  const itemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  };

  return (
    <View>
      {loading === false ? (
        <View style={styles.MainContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={(text) => searchData(text)}
            value={text}
            underlineColorAndroid="transparent"
            placeholder="Search Here"
          />

          <FlatList
            data={data}
            keyExtractor={(item, index) => index.toString()}
            ItemSeparatorComponent={itemSeparator}
            renderItem={({ item }) => (
              <Text style={styles.row}>{item.Country}</Text>
            )}
            style={{ marginTop: 10 }}
          />
        </View>
      ) : (
        <Text>loading</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  MainContainer: {
    paddingTop: 50,
    justifyContent: "center",
    flex: 1,
    margin: 5,
  },

  row: {
    fontSize: 18,
    padding: 12,
  },

  textInput: {
    textAlign: "center",
    height: 42,
    borderWidth: 1,
    borderColor: "#009688",
    borderRadius: 8,
    backgroundColor: "#FFFF",
  },
});

---

在获取数据时，错误似乎来自catch块。响应的状态为200，因此端点本身没有问题。我记录了响应，看起来很好。问题是当您解析响应并尝试在第二个块中使用它时，那么catch块就会启动。我无法在您使用的编辑器中正确调试它，但我会检查从API调用接收的对象类型。

在获取数据时，错误似乎来自catch块。响应的状态为200，因此端点本身没有问题。我记录了响应，看起来很好。问题是当您解析响应并尝试在第二个块中使用它时，那么catch块就会启动。我无法在您使用的编辑器中正确调试它，但我会检查从API调用接收的对象类型。

您在上述代码中犯了两个错误

useEffect第二个参数应该是空数组，因为它充当componentDidMount

useEffect=>{ fetchAPI； }，[]

在FlatList renderItem中，需要对项目进行分解

  renderItem={( {item}  ) => <Text style={styles.row}
   >{item.Country}</Text>}

工作代码

    import React, {useState, useEffect} from "react"
import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from 'react-native';

export default function ABCDEE(){


  const [arrayholder,setArrayholder] =useState([])
  const[text, setText] = useState('')
  const[data, setData] = useState([])
  const [loading , setLoading] = useState(true)

  const fetchAPI = ()=> {
    return fetch('https://api.covid19api.com/countries')
    .then((response) => response.json())
    .then((responseJson) => {
        setData(responseJson)
        setLoading(false)
        setArrayholder(responseJson)
    }

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

  useEffect(() => {
    fetchAPI();
  },[])


  const searchData= (text)=>  {
    const newData = arrayholder.filter(item => {
      const itemData = item.Country.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1
    });

      setData(newData)
      setText(text)
    }

   const itemSeparator = () => {
      return (
        <View
          style={{
            height: .5,
            width: "100%",
            backgroundColor: "#000",
          }}
        />
      );
    }

      return (
          <View style={{flex:1}} >
    {loading === false ?  
        <View style={styles.MainContainer}>

        <TextInput 
         style={styles.textInput}
         onChangeText={(text) => searchData(text)}
         value={text}
         underlineColorAndroid='transparent'
         placeholder="Search Here" />

        <FlatList
          data={data}
          keyExtractor={ (item, index) => index.toString() }
          ItemSeparatorComponent={itemSeparator}
          renderItem={( {item}  ) => <Text style={styles.row}
           >{item.Country}</Text>}
          style={{ marginTop: 10 }} />

      </View>
      : <Text>loading</Text>}

      </View>
    );
  }


const styles = StyleSheet.create({

  MainContainer: {
    paddingTop: 50,
    justifyContent: 'center',
    flex: 1,
    margin: 5,

  },

  row: {
    fontSize: 18,
    padding: 12
  },

  textInput: {

    textAlign: 'center',
    height: 42,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 8,
    backgroundColor: "#FFFF"

  }
});

---

您在上述代码中犯了两个错误

useEffect第二个参数应该是空数组，因为它充当componentDidMount

useEffect=>{ fetchAPI； }，[]

在FlatList renderItem中，需要对项目进行分解

  renderItem={( {item}  ) => <Text style={styles.row}
   >{item.Country}</Text>}

工作代码

    import React, {useState, useEffect} from "react"
import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from 'react-native';

export default function ABCDEE(){


  const [arrayholder,setArrayholder] =useState([])
  const[text, setText] = useState('')
  const[data, setData] = useState([])
  const [loading , setLoading] = useState(true)

  const fetchAPI = ()=> {
    return fetch('https://api.covid19api.com/countries')
    .then((response) => response.json())
    .then((responseJson) => {
        setData(responseJson)
        setLoading(false)
        setArrayholder(responseJson)
    }

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

  useEffect(() => {
    fetchAPI();
  },[])


  const searchData= (text)=>  {
    const newData = arrayholder.filter(item => {
      const itemData = item.Country.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1
    });

      setData(newData)
      setText(text)
    }

   const itemSeparator = () => {
      return (
        <View
          style={{
            height: .5,
            width: "100%",
            backgroundColor: "#000",
          }}
        />
      );
    }

      return (
          <View style={{flex:1}} >
    {loading === false ?  
        <View style={styles.MainContainer}>

        <TextInput 
         style={styles.textInput}
         onChangeText={(text) => searchData(text)}
         value={text}
         underlineColorAndroid='transparent'
         placeholder="Search Here" />

        <FlatList
          data={data}
          keyExtractor={ (item, index) => index.toString() }
          ItemSeparatorComponent={itemSeparator}
          renderItem={( {item}  ) => <Text style={styles.row}
           >{item.Country}</Text>}
          style={{ marginTop: 10 }} />

      </View>
      : <Text>loading</Text>}

      </View>
    );
  }


const styles = StyleSheet.create({

  MainContainer: {
    paddingTop: 50,
    justifyContent: 'center',
    flex: 1,
    margin: 5,

  },

  row: {
    fontSize: 18,
    padding: 12
  },

  textInput: {

    textAlign: 'center',
    height: 42,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 8,
    backgroundColor: "#FFFF"

  }
});

---

您的实现存在多个问题。我要指出一些错误/无知。您可以相应地清理代码

不要创建两个状态来保留相同的数据。即arrayholder和数据。 在搜索时更改文本值，而不更改数据。基于该文本过滤器 钩子总是定义一些要监视的变量。 更新：android视图中的flex似乎有问题，我使用固定高度，它是可见的

只是针对安卓系统的问题。minHeight

工作链接：

更新代码：

 import React, { useState, useEffect } from 'react';
import {
  ActivityIndicator,
  Alert,
  FlatList,
  Text,
  StyleSheet,
  View,
  TextInput,
} from 'react-native';

export default function ABCDEE() {
  const [text, setText] = useState('');
  const [state, setState] = useState({ data: [], loading: false }); // only one data source
  const { data, loading } = state;
  const fetchAPI = () => {
    //setState({data:[], loading: true});
    return fetch('https://api.covid19api.com/countries')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setState({ data, loading: false }); // set only data
      })
      .catch(error => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchAPI();
  }, []); // use `[]` to avoid multiple side effect

  const filterdData = text // based on text, filter data and use filtered data
    ? data.filter(item => {
        const itemData = item.Country.toUpperCase();
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      })
    : data; // on on text, u can return all data
  console.log(data);
  const itemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#000',
        }}
      />
    );
  };

  return (
    <View>
      {loading === false ? (
        <View style={styles.MainContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={text => setText(text)}
            value={text}
            underlineColorAndroid="transparent"
            placeholder="Search Here"
          />
          <FlatList
            data={filterdData}
            keyExtractor={(item, index) => index.toString()}
            ItemSeparatorComponent={itemSeparator}
            renderItem={({ item }) => (
              <Text style={styles.row}>{item.Country}</Text>
            )}
            style={{ marginTop: 10 }}
          />
        </View>
      ) : (
        <Text>loading</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  MainContainer: {
    paddingTop: 50,
    justifyContent: 'center',
    //flex: 1,
    margin: 5,
    height: 800,
  },

  row: {
    fontSize: 18,
    padding: 12,
  },

  textInput: {
    textAlign: 'center',
    height: 42,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 8,
    backgroundColor: '#333',
  },
});

---

您的实现存在多个问题。我要指出一些错误/无知。您可以相应地清理代码

不要创建两个状态来保留相同的数据。即arrayholder和数据。 在搜索时更改文本值，而不更改数据。基于该文本过滤器 钩子总是定义一些要监视的变量。 更新：android视图中的flex似乎有问题，我使用固定高度，它是可见的

只是针对安卓系统的问题。minHeight

工作链接：

更新代码：

 import React, { useState, useEffect } from 'react';
import {
  ActivityIndicator,
  Alert,
  FlatList,
  Text,
  StyleSheet,
  View,
  TextInput,
} from 'react-native';

export default function ABCDEE() {
  const [text, setText] = useState('');
  const [state, setState] = useState({ data: [], loading: false }); // only one data source
  const { data, loading } = state;
  const fetchAPI = () => {
    //setState({data:[], loading: true});
    return fetch('https://api.covid19api.com/countries')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setState({ data, loading: false }); // set only data
      })
      .catch(error => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchAPI();
  }, []); // use `[]` to avoid multiple side effect

  const filterdData = text // based on text, filter data and use filtered data
    ? data.filter(item => {
        const itemData = item.Country.toUpperCase();
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      })
    : data; // on on text, u can return all data
  console.log(data);
  const itemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#000',
        }}
      />
    );
  };

  return (
    <View>
      {loading === false ? (
        <View style={styles.MainContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={text => setText(text)}
            value={text}
            underlineColorAndroid="transparent"
            placeholder="Search Here"
          />
          <FlatList
            data={filterdData}
            keyExtractor={(item, index) => index.toString()}
            ItemSeparatorComponent={itemSeparator}
            renderItem={({ item }) => (
              <Text style={styles.row}>{item.Country}</Text>
            )}
            style={{ marginTop: 10 }}
          />
        </View>
      ) : (
        <Text>loading</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  MainContainer: {
    paddingTop: 50,
    justifyContent: 'center',
    //flex: 1,
    margin: 5,
    height: 800,
  },

  row: {
    fontSize: 18,
    padding: 12,
  },

  textInput: {
    textAlign: 'center',
    height: 42,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 8,
    backgroundColor: '#333',
  },
});

---

这不是对你问题的直接回答，但我不想在评论中忽略这一点，因为这与你在这个应用程序上的努力直接相关

App Store和Google Play Store不再接受引用新冠病毒19的应用

如果你是像政府卫生部门这样有信誉的信息来源，你只能发布关于新冠病毒-19的应用程序

---

因此，我敦促您重新评估您在该应用程序上的努力。

这不是对您问题的直接回答，但我不想在评论中忽略这一点，因为这与您在该应用程序上的努力直接相关

App Store和Google Play Store不再接受引用新冠病毒19的应用

如果你是像政府卫生部门这样有信誉的信息来源，你只能发布关于新冠病毒-19的应用程序

---

因此，我敦促您重新评估您在该应用程序上的努力。

它在web上正常工作，但在我的android设备上它没有显示国家扫描您是否使用零食检查？它可以让你在android和webadd中看到style={{flex:1}}要让根视图在android中工作，我已经更新了工作代码。@bk7请你演示如何添加另一个键过滤器，而不仅仅是.Country？它在web中正常工作，但在我的android设备上它没有显示Country扫描请你使用零食检查？它将让你在android和webadd中看到style={{flex:1}}，以便根视图在android中工作，我已经更新了工作代码。@bk7您能否演示如何添加另一个键筛选器而不是仅添加.Country？它是一个json对象json对象平面列表仍然呈现为空：让我检查数据如果您检查我的零食它在web上工作，但如果我在android设备上尝试，它会在此处呈现空的控制台renderItem=>{console.logitem返回{item.Country}}我从这里获得了帮助，代码是类组件，我将其转换为函数组件，因为我的所有其他组件都是基于函数的平台列表仍然呈现为空：让我检查数据如果你检查我的零食，它在web上工作，但如果我在android设备上尝试，它在这里呈现为空的控制台renderItem={item}=>{con

---

sole.logitem return{item.Country}}}我从这里得到了帮助，代码在类组件中，我将其转换为函数组件，因为我的所有其他组件都是基于函数的感谢picacode告诉我这一点，但我做这件事是作为大学作业。我不打算在app store上发布它：再次感谢：感谢picacode告诉我这件事，但我是作为大学作业来做的。我不打算在app store上发布：再次感谢：