Search engine in Expo

淺唱寂寞╮ 提交于 2021-02-05 08:10:42

问题


I follow this tutorial to add search to my Expo (React Native) app. After the last step I have this mistake:photo.

What should I do?

This is the part of the program.

This is one of my navigation screens, where I have links for other screens:

    function InfoScreen({ navigation }) {
      return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Button title="Go back" onPress={() => navigation.goBack()} />
                          <View style={styles.container_new}>
          <Text style={styles.text}>Basic FlatList Example</Text>
          <FlatList
          ListHeaderComponent={renderHeader} 
          ...
                  </View> 
                )}
              /> 
            </View>        
            </View> 
          );
        }

Function renderHeader from the tutorial:

        function renderHeader() {
      return (
       ...
     );
    }

Part from the tutorial (last steps)

    const [query, setQuery] = useState('');
    const [fullData, setFullData] = useState([]);


useEffect(() => {
  setIsLoading(true);

  fetch(API_ENDPOINT)
    .then(response => response.json())
    .then(response => {
      setData(response.results);

      // ADD THIS
      setFullData(response.results);

      setIsLoading(false);
    })
    .catch(err => {
      setIsLoading(false);
      setError(err);
    });
}, []);

const handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const filteredData = filter(fullData, user => {
    return contains(user, formattedQuery);
  });
  setData(filteredData);
  setQuery(text);
};

const contains = ({ name, email }, query) => {
  const { first, last } = name;

  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }

  return false;
};

来源:https://stackoverflow.com/questions/65302112/search-engine-in-expo

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!