Reactjs 如何使用搜索栏和Redux挂钩在React Native中搜索FlatList

我正在尝试使用React Native和Redux钩子搜索平面列表。有很多关于如何做到这一点的信息，但是没有使用调度挂钩

我的非工作代码如下：

const Contacts = () => {
  const dispatch = useDispatch();
  const contacts = useSelector(state => state.user.parsedContacts);

  const renderContacts = contacts => {
    return (
      <ContactListItem
        name={contacts.item.full_name}
        phone={contacts.item.phone}
        isRegisteredUser={contacts.item.id !== 0 ? true : false}
      />
    )
  }

  const handleFilter = input => {
    dispatch(updateParsedContacts(contacts.filter(contact => contact.full_name.includes(input))));
  }

  if (contacts !== null) {
    return (
      <View>
        <StatusBar />
        <View style={styles.topMargin}>
        </View>
        <View style={styles.header}>
          <SearchBar
            iconColor="#EE578D"
            placeholder="Search Here..."
            onChangeText={handleFilter}
          />
        </View>
        <FlatList
          data={contacts}
          renderItem={renderContacts}
          initialNumToRender={5}
          maxToRenderPerBatch={10}
          windowSize={10}
          keyExtractor={(_, index) => index.toString()}
        />

const Contacts=（）=>{
const dispatch=usedpatch（）；
const contacts=useSelector（state=>state.user.parsedContacts）；
const renderContacts=联系人=>{
返回(
)
}
const handleFilter=输入=>{
分派（updateParsedContacts（contacts.filter（contact=>contact.full_name.includes（input）））；
}
如果（联系人！==null）{
返回(
index.toString（）}
/>

---

当用户在搜索栏中输入put文本时，我正在尝试实时更新平面列表。

handleFilter

函数接收输入文本，但Redux存储未正确更新。应如何实现此操作？

您的代码有问题：

搜索后，您将更新主数据列表，因此，当您再次搜索时，您将在筛选后的列表中搜索。如果删除搜索字符，则无法返回所有结果

为了避免这种情况，我建议您为筛选合同添加新的子状态，或者在组件级别执行筛选：

const contacts = useSelector(state => state.user.parsedContacts);

// memoize a filtered contracts that is recalculated when either contracts of the input change
const filteredContracts = React.useMemo(() => {
  return contracts.filter(contact => contact.full_name.includes(input));
}, [contracts, input]);


// ... later
        <FlatList
          data={filteredContracts}
          renderItem={renderContacts}
          initialNumToRender={5}
          maxToRenderPerBatch={10}
          windowSize={10}
          keyExtractor={(_, index) => index.toString()}
        />

const contacts=useSelector（state=>state.user.parsedContacts）；
//当输入的任一合同发生更改时，将重新计算过滤后的合同
const filteredContracts=React.useMoom（（）=>{
返回contracts.filter（contact=>contact.full_name.includes（input））；
}，[合同，输入]；
//……以后
index.toString（）}
/>