React Native基于Modal的数据筛选函数失效求助

问题分析与修复点 #

1. AgencyType组件未绑定状态

AgencyType自定义下拉组件缺少selectedValue和onValueChange属性绑定，导致agencyType状态始终为空，类型筛选逻辑完全不生效。

修复：
给AgencyType添加状态绑定：

<AgencyType
  placeholder="All Agencies"
  selectedValue={agencyType}
  onValueChange={itemValue => setAgencyType(itemValue)}
/>

2. TextInput的value绑定错误

TextInput的value错误绑定到agencyType，而非agencyName，输入的搜索内容无法同步到目标状态，名称筛选失效。

修复：
修正TextInput的value绑定：

<TextInput
  placeholder="Search agencies"
  value={agencyName}
  onChangeText={name => setAgencyName(name)}
  style={styles.LastInout}
/>

3. 按钮点击事件绑定错误

TouchableOpacity的onPress直接引用了数组变量filteredData，而非调用筛选函数handleSearch，点击按钮不会触发筛选逻辑。

修复：
将onPress改为调用handleSearch：

<TouchableOpacity activeOpacity={0.6} onPress={handleSearch}>

4. 筛选结果未传递给父组件

handleSearch生成了筛选后的filteredData，但没有传递给父组件，导致筛选结果无法被使用。

修复：
在组件props中新增回调函数onFilter，完成筛选后传递结果：

• 先修改组件接收的props：

const AgencyFilterModal = ({setOpen, data, loading, onFilter}) => {

• 再在handleSearch中调用回调：

const handleSearch = () => {
  const filteredData = data.filter(item => {
    // 原筛选逻辑不变
  });
  onFilter(filteredData);
  setOpen(false);
};

5. Modal的isVisible属性硬编码

Modal的isVisible被固定为true，无法通过setOpen(false)控制关闭，应该由父组件传入状态控制。

修复：
从props接收open状态绑定到isVisible：

• 修改组件props：

const AgencyFilterModal = ({setOpen, data, loading, onFilter, open}) => {

• 更新Modal的isVisible属性：

<Modal
  isVisible={open}
  // 其他属性不变
>

完整修复后的代码 #

import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import IonIcons from 'react-native-vector-icons/Ionicons';
import React, {useState} from 'react';
import Modal from 'react-native-modal';
import {COLORS} from '../../../constants';
import {Quicksand_FONTS, width} from '../../../constants/theme';
import DropDown from './component/Dropdown';
import AgencyType from './component/AgencyType';

const AgencyFilterModal = ({setOpen, data, loading, onFilter, open}) => {
  const [city, setCity] = useState('');
  const [agencyType, setAgencyType] = useState('');
  const [agencyName, setAgencyName] = useState('');

  const handleSearch = () => {
    const filteredData = data.filter(item => {
      let cityFilter = true;
      let agencyTypeFilter = true;
      let agencyNameFilter = true;

      if (city && item.city.toLowerCase() !== city.toLowerCase()) {
        cityFilter = false;
      }

      if (agencyType && item.agencyType.toLowerCase() !== agencyType.toLowerCase()) {
        agencyTypeFilter = false;
      }

      if (agencyName && !item.agencyName.toLowerCase().includes(agencyName.toLowerCase())) {
        agencyNameFilter = false;
      }

      return cityFilter && agencyTypeFilter && agencyNameFilter;
    });
    onFilter(filteredData);
    setOpen(false);
  };

  return (
    <View style={styles.container}>
      <Modal
        isVisible={open}
        backdropColor={COLORS.dark}
        animationIn="slideInUp"
        onBackdropPress={() => setOpen(false)}
        scrollOffset={40}
        style={styles.modal}>
        <View style={styles.modalWrapper}>
          <Text style={styles.modal_line}></Text>

          <DropDown
            placeholder="All Cities"
            selectedValue={city}
            onValueChange={itemValue => setCity(itemValue)}
          />

          <AgencyType
            placeholder="All Agencies"
            selectedValue={agencyType}
            onValueChange={itemValue => setAgencyType(itemValue)}
          />
          
          <View style={styles.bottomBox_container}>
            <TextInput
              placeholder="Search agencies"
              value={agencyName}
              onChangeText={name => setAgencyName(name)}
              style={styles.LastInout}
            />
          </View>

          <TouchableOpacity activeOpacity={0.6} onPress={handleSearch}>
            <IonIcons
              name="search"
              size={25}
              color={COLORS.light}
              style={styles.button}
            />
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

export default AgencyFilterModal;

父组件使用示例 #

父组件需传入控制Modal显示的状态、关闭方法，以及接收筛选结果的回调：

// 父组件示例代码
const [filterOpen, setFilterOpen] = useState(false);
const [originalData, setOriginalData] = useState([]);
const [filteredData, setFilteredData] = useState([]);

// 获取API数据后设置originalData

return (
  <>
    <TouchableOpacity onPress={() => setFilterOpen(true)}>
      <Text>打开筛选</Text>
    </TouchableOpacity>

    <AgencyFilterModal
      open={filterOpen}
      setOpen={setFilterOpen}
      data={originalData}
      onFilter={(result) => setFilteredData(result)}
    />

    {/* 渲染筛选后的数据 */}
  </>
);

内容的提问来源于stack exchange，提问作者user18259724