React Native页面传参后设置useState引发无限循环问题求助

问题根源 #

你直接在组件顶层渲染逻辑中调用setAppliedFilters（通过updateAppliedFilter），引发了无限循环：

1. 组件渲染时检测到route.params?.newFilter存在，执行状态更新
2. 状态更新触发组件重新渲染
3. 重新渲染时再次检测到route.params?.newFilter存在，再次执行状态更新
4. 往复循环直到React触发渲染次数限制

解决方案 #

方法1：使用useEffect监听参数变化 #

通过useEffect限制仅当route.params.newFilter变化时才执行状态更新，避免每次渲染都触发逻辑：

import { useEffect } from 'react';

// 父页面HomeScreen代码
const [appliedFilters, setAppliedFilters] = useState(/* 你的初始值 */);

const updateAppliedFilter = (filter) => {
  setAppliedFilters(filter);
};

useEffect(() => {
  const incomingFilter = route.params?.newFilter;
  if (incomingFilter) {
    console.log('filterFound');
    console.log(incomingFilter);
    updateAppliedFilter(incomingFilter);
    // 可选：清除导航参数，避免后续渲染重复处理
    navigation.setParams({ newFilter: undefined });
  }
}, [route.params?.newFilter, navigation, updateAppliedFilter]);

方法2：处理参数后立即清除参数 #

如果需要确保参数只被处理一次，可在处理后清除导航参数，建议配合useEffect使用，避免直接在顶层代码中调用引发额外渲染：

useEffect(() => {
  const incomingFilter = route.params?.newFilter;
  if (incomingFilter) {
    updateAppliedFilter(incomingFilter);
    navigation.setParams({ newFilter: undefined });
  }
}, [route.params?.newFilter]);

关键注意事项 #

• 禁止在组件顶层渲染逻辑中直接调用setState或其他会触发重新渲染的函数，这是引发无限循环的常见原因
• useEffect的依赖数组必须包含所有用到的外部变量，确保逻辑能正确触发且不遗漏依赖

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