React Native中FlatList的onEndReached触发后setState不生效是什么原因？

核心原因 #

1. 闭包陷阱捕获旧状态 #

你监听navigation focus事件的useEffect依赖数组仅填写了[navigation]，这会导致该effect在组件首次初始化时生成闭包，永久捕获当时的numbersOfItem = 20的快照值，后续调用setNumberOfItem更新状态后，旧闭包内永远拿不到最新的状态值，你调试打印时如果是在旧闭包的回调（比如早期定义的按钮点击回调、FlatList缓存的onEndReached回调）中取值，拿到的永远是初始的20。

2. 状态更新后无对应请求逻辑 #

你当前的逻辑仅在navigation触发focus事件时才会拉取数据，调用setNumberOfItem修改数值后，没有触发对应的数据拉取逻辑，哪怕状态更新成功也不会请求40条的商品数据。

3. 冗余state导致数据不同步 #

你额外声明了itemList state存储Redux拿到的productList副本，多一层冗余数据很容易出现同步不及时的问题，完全没有必要额外存储。

修复步骤 #

1. 补全useEffect依赖项，把所有用到的外部变量加入依赖数组，避免闭包陷阱：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    setLoading(true);
    async function fetchData() {
      try {
        await dispatch(fetchProductList(numbersOfItem));
      } catch (err) {
        console.log(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  });

  return unsubscribe;
}, [navigation, dispatch, numbersOfItem]);

2. 新增状态变更后的请求逻辑，有两种可选方案：

• 方案A：直接在handleLoadMoreData中主动触发请求

const handleLoadMoreData = async () => {
  alert('function run')
  const newItemCount = 40;
  setNumberOfItem(newItemCount);
  setLoading(true);
  try {
    await dispatch(fetchProductList(newItemCount));
  } catch (err) {
    console.log(err);
  } finally {
    setLoading(false);
  }
};

• 方案B：新增单独的useEffect监听numbersOfItem变化，自动触发请求

useEffect(() => {
  setLoading(true);
  async function fetchData() {
    try {
      await dispatch(fetchProductList(numbersOfItem));
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  }
  fetchData();
}, [numbersOfItem, dispatch]);

3. 删除冗余的itemList state，直接把Redux获取的productList传给FlatList的data属性即可：

<FlatList
  data={productList}
  // 其余属性保持不变
/>

调试验证技巧 #

在组件顶层直接加入console.log(numbersOfItem)，只要setNumberOfItem执行成功，组件重渲染时必然会打印最新的数值。如果在回调函数中打印拿不到新值，100%是闭包缓存了旧快照的问题，不是setState没有生效。

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