搜索react native cloud firestore后如何恢复数据

Question

So i have a problem that after done searching once name, when start type to search again.

the data won't show again but after goBack() and go to the screen again data show, but only can search once more

Can anyone help

Thank You

const nameList = () => {
  const [daftar, setDaftar] = useState<any>([]);
  const [search, setSearch] = useState<any>('');

  const searchName = (input) => {
    let data = daftar;
    let searchData = data.filter((item) => {
      return (
        item?.name.toLowerCase().includes(input.toLowerCase()) ||
        item?.address?.toLowerCase().includes(input?.toLowerCase())
      );
    });
    setDaftar(searchData);
  };
     

  return (
    <Div flex={1} bg="#fff">
      <Div py={heightPercentageToDP(1)} px={heightPercentageToDP(2)}>
        <Input
          focusBorderColor={PRIMARY_COLOR}
          placeholder="Search..."
          onChangeText={(val) => searchName(val)}
          // value={search}
        />
      </Div>
    </Div>
  );
};

Answer 1

You should keep the filtered data in a different state.

Set the same data to both the deftar and the filteredList when the page is first opened. when you search you use the deftar datas and the result is set to filteredList

In the page use filteredList

const nameList = () => {
  const [daftar, setDaftar] = useState<any>([]);
  const [search, setSearch] = useState<any>('');
  const [filteredList, setFilterList] = useState<any>([]);

  const searchName = (input) => {
    let data = daftar;
    let searchData = data.filter((item) => {
      return (
        item?.name.toLowerCase().includes(input.toLowerCase()) ||
        item?.address?.toLowerCase().includes(input?.toLowerCase())
      );
    });
    setFilterList(searchData);
  };
     

  return (
    <Div flex={1} bg="#fff">
      <Div py={heightPercentageToDP(1)} px={heightPercentageToDP(2)}>
        <Input
          focusBorderColor={PRIMARY_COLOR}
          placeholder="Search..."
          onChangeText={(val) => searchName(val)}
          // value={search}
        />
      </Div>
    </Div>
  );
};