为什么我的世博会反应搜索栏不起作用？

Question

import React, { useState, useEffect } from "react";
import { VStack, Input, Icon,  Divider, Heading, Box, FlatList, Center, NativeBaseProvider, Text } from "native-base";
import { Ionicons } from "@expo/vector-icons";
export default function Stocks() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true); 
const fetchData = async () => {
const resp = await fetch("http://localhost:8080/all");
const data = await resp.json();
setData(data);
setLoading(false);
};
const renderItem = ({ item }) => {
return (
<Box px={16} py={2} rounded="md" bg="primary.900" my={0.5}>
{item.symbol}
{item.name}
</Box>
);
};
useEffect(() => {
fetchData();
}, []);

return (
<NativeBaseProvider>
<Center flex={1}>
<Box> Fetch API</Box>
<SearchBar />
{loading && <Box>Loading..</Box>}
{data && (
<FlatList
data={data}
renderItem={renderItem}
/>
)}
</Center>
</NativeBaseProvider>
);
}
function SearchBar() {
return <VStack my="4" space={5} w="100%" maxW="300px" divider={<Box px="2">
<Divider />
</Box>}>
<VStack w="100%" space={5} alignSelf="center">
<Heading fontSize="lg">Search for stocks</Heading>
<Input placeholder="Search" variant="filled" width="100%" borderRadius="10" py="1" px="2" InputLeftElement={<Icon ml="2" size="4" color="gray.400" as={<Ionicons name="ios-search" />} />} />
</VStack>
</VStack>;
}

当我在我的android虚拟机上运行程序时，我所有的项目都显示为应有的，并且有一个搜索栏，但是当我试图搜索符号(item.symbol)时，什么也没有发生。搜索栏就在那里，但实际上并没有连接到我的API。我需要放点东西进去吗?

Answer 1

嘿@thehealeper67不确定你是否修复了它，但我希望在你的搜索栏内找到一个方法，当值发生变化时将被更新(onChangeText - in SearchBar from react-native-elements)，而且，你需要一些函数使用searchput的当前值并过滤你的数据。你可以检查一下:https://www.geeksforgeeks.org/how-to-add-searchbar-in-react-native/