Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native: FlatList not updating initial data with extraData

$
0
0

So I tried adding a searchbar that is supposed to update a flatlist, however, I can not make it update. The following code is what I've been trying to do.

const DeviceList: React.FC = () => {  const fetcher = url => api.get(url).then(res => res.data);  const { navigate } = useNavigation();  const { data, error } = useSWR<Device[]>(    // FETCH DATA FROM AN API  );  var fullData = data;  var initialData = data;  const [updatingData, setUpdatingData] = useState(data);  const navigateToDevice = useCallback(    (deviceId: string, device: Device, deviceName: string) => {      navigate('Device', { deviceId, device , deviceName});    },    [navigate],  );  const contains = ({name}, query) => {    if (name !== undefined){      if (name.includes(query)){        return true      }    }    return false  }  const [search, setSearch] = useState("");  const updateSearch = (search) => {    setSearch(search);    setUpdatingData([...filter(fullData, device => {      return contains(device, search);    })])  };  const navigateToReader = useCallback(() => {    navigate('Reader');  }, [navigate]);  if (!data) {    return (<Container><Text>Loading</Text></Container>    );  }  return (<Container><SearchBar        placeholder="Device Name"        defaultValue=''        onChangeText={updateSearch}        value={search}      /><DevicesList        data={initialData}        extraData={updatingData}        keyExtractor={device => device.name}        renderItem={({ item: device }) => (<DeviceContainer            onPress={() => {              navigateToDevice(device.device, device, device.name);            }}><DeviceIcon name="truck" size={24} color="black" /><DeviceName>{device.name}</DeviceName></DeviceContainer>        )}      /><ButtonContainer><Button          onPress={() => {            navigateToReader();          }}>          Scan</Button></ButtonContainer></Container>  );};export default DeviceList;

This will show me the list with all the device names when I boot the app up but the search bar will not work. If I set both of data and extraData to updatingData it will not show me anything when I boot the app up, however, the search will work. I have also tried updating the initialData variable inside the updateSearch function, however, it also did not work.

I would like to know how can I make it so that I can have both solutions working together, show the initial data AND have it update whenever I type something on the search bar.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>