React Native中FlatList过滤时多次重渲染及空对象错误修复咨询

你的请求代码 #

// Fetch Leads
const getLeadnew = useCallback(() => {
  //fetch('https://3ed6-122-165-218-218.in.ngrok.io/api/Proaddall', {
  fetch(`${BASE_URL}/api/leadsappall`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: `Bearer ${userInfo.token}`,
    },
  })
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      console.log(res.leads);
      setLeadnew(res.leads);
      //Filter Method input
      //console.log(Leadnew);
    })
    .catch((e) => {
      console.log(e);
    });
},);

针对性解决办法 #

1. 解决多次重渲染问题 #

• 补全useCallback依赖项：当前useCallback没有传依赖数组，会导致每次组件渲染都重新创建这个函数，触发不必要的重渲染。把用到的变量都放进依赖数组：

  const getLeadnew = useCallback(() => {
    // ... 原有代码
  }, [BASE_URL, userInfo.token, setLeadnew]);
  

• 用useMemo缓存过滤结果：如果过滤逻辑在渲染阶段执行，每次渲染都会重新计算，用useMemo缓存后，只有原始数据或过滤条件变化时才重新计算：

  const filteredLeads = useMemo(() => {
    if (!leadnew) return [];
    // 替换成你的过滤逻辑，比如按关键词筛选
    return leadnew.filter(item => item.name.includes(filterKeyword));
  }, [leadnew, filterKeyword]);
  

• 给FlatList加稳定的keyExtractor：确保返回唯一且固定的ID，避免列表项不必要的重渲染：

  <FlatList
    data={filteredLeads}
    keyExtractor={(item) => item.id.toString()}
    // ... 其他属性
  />
  

2. 解决“cannot convert undefined or null to object”错误 #

这个错误是因为leadnew未初始化（初始值为undefined/null）时就执行了数组/对象操作，处理方式如下：

• 初始化leadnew为空数组：

  const [leadnew, setLeadnew] = useState([]);
  

• 过滤前先判空：执行数组操作前先确认数据有效：

  const filteredLeads = useMemo(() => {
    if (!Array.isArray(leadnew)) return [];
    // 过滤逻辑
  }, [leadnew, filterKeyword]);
  

• 请求返回值做兜底处理：设置状态时确保拿到的是数组：

  .then((res) => {
    console.log(res.leads);
    setLeadnew(Array.isArray(res.leads) ? res.leads : []);
  })
  

3. 通过ID匹配获取对应名称 #

提前把数据转成ID为键的映射对象，用useMemo缓存，匹配时直接取值，不用遍历数组：

const leadIdToNameMap = useMemo(() => {
  if (!Array.isArray(leadnew)) return {};
  return leadnew.reduce((map, item) => {
    map[item.id] = item.name; // 假设id是唯一标识，name是目标字段
    return map;
  }, {});
}, [leadnew]);

// 使用时直接通过ID取名称
const targetName = leadIdToNameMap[targetId] || '未知名称';

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