React首页加载自动发API请求，如何仅在设置变更时才重新发起请求？

你当前的问题核心是首页组件挂载就触发请求的逻辑不合理，你已经用了Redux做全局状态管理，完全可以通过新增两个全局状态标识实现需求，不需要依赖本地存储：

第一步：修改Redux状态配置 #

在你存储nationlity的对应Slice中新增两个状态字段：

// 用户相关Slice的初始状态示例
const initialState = {
  users: [],
  loading: false,
  search: '',
  nationlity: '',
  // 新增两个标识
  homeDataFetched: false, // 标记首页是否已经完成首次数据拉取
  configChanged: false // 标记设置页的配置是否被修改过
}

// 新增对应的reducer方法
reducers: {
  // 首页请求完成后调用，标记首页已拉取过数据
  markHomeFetched: (state) => {
    state.homeDataFetched = true
  },
  // 设置页修改配置时调用，标记配置已变更
  markConfigChanged: (state) => {
    state.configChanged = true
  },
  // 首页用新配置请求完成后调用，重置配置变更标记
  resetConfigChanged: (state) => {
    state.configChanged = false
  }
}

第二步：调整首页组件逻辑 #

修改首页的useEffect依赖和判断条件，仅在首次加载、或者配置有变更时才发起请求：

const users = useSelector((state) => state.users);
const loading = useSelector((state) => state.loading);
const search = useSelector((state) => state.search);
const nationlity = useSelector((state) => state.nationlity);
const homeDataFetched = useSelector((state) => state.homeDataFetched);
const configChanged = useSelector((state) => state.configChanged);
const [hasMore, setHasMore] = useState(true);
const dispatch = useDispatch();

useEffect(() => {
  // 仅首次加载 或 配置有修改时才发请求
  if (!homeDataFetched || configChanged) {
    const fetchAction = nationlity ? fetchUseresWithNationality(nationlity) : fetchUser();
    // 假设你的请求是异步thunk，请求成功后触发两个标记的更新
    fetchAction.then(() => {
      dispatch(markHomeFetched());
      dispatch(resetConfigChanged());
    })
  }
}, [nationlity, homeDataFetched, configChanged, dispatch]);

const loadMoreUsers = () => {
  if (users.length <= 999) {
    if (nationlity) {
      fetchMoreUseresWithNationality(nationlity);
    } else {
      fetchMoreUsers();
    }
  } else {
    setHasMore(false);
  }
};
return (<>My Content</>)
}; 

第三步：调整设置页逻辑 #

只要用户在设置页修改了国籍等和请求相关的配置，就调用dispatch(markConfigChanged())标记配置已变更即可。

另外注意你现有代码里存在拼写问题：fetchUseres、nationlity建议修正为标准拼写fetchUsers、nationality，避免后续出现莫名的调用错误。

内容的提问来源于stack exchange，提问作者Shah Faisal Bukhari