React Native状态更新异常：子组件选中状态无法同步至父组件

你遇到的核心问题有两个：

• React状态更新的异步特性，导致你在setSelectedCategory后立刻console.log拿到的是旧值
• Header组件内部维护了独立的selectedCategory状态，可能和父组件HomeScreen的状态出现不同步

1. 解决状态更新后console.log显示旧值的问题 #

React的setState是异步操作，调用setSelectedCategory(category)后，组件状态不会立即更新，当前函数作用域内的selectedCategory还是更新前的旧值。要查看更新后的状态，需要用useEffect监听状态变化：

修改HomeScreen组件：

export default function HomeScreen({ navigation }) {
  const [selectedCategory, setSelectedCategory] = useState(null);
  
  // 监听状态变化，获取最新值
  useEffect(() => {
    console.log('当前选中分类ID：', selectedCategory?.id);
  }, [selectedCategory]);

  const handleSelectedCategory = (category) => {
    setSelectedCategory(category);
    // 此处直接console.log无法获取最新状态，因为setState是异步的
  };

  // 其余代码保持不变
}

2. 统一状态管理，避免父子组件状态不同步 #

Header组件内部单独维护selectedCategory状态，会导致如果父组件状态被外部逻辑修改，Header的选中状态无法同步更新。正确的做法是把状态完全交给父组件管理，Header只负责接收状态和触发回调：

修改后的Header组件：

function HomeHeader({ categories, contentOffsetY, handleSelectedCategory, selectedCategory }) {
  const FLAT_LIST_REF = useRef(null);

  const selectCategory = (category, index) => {
    if (selectedCategory === category) {
      handleSelectedCategory(null);
    } else {
      handleSelectedCategory(category);
      scrollToIndex(index);
    }
  };

  const renderItem = useCallback(
    ({ item, index }) => {
      return (
        <Pressable onPress={() => selectCategory(item, index)}>
          {/* 可根据selectedCategory判断选中状态，渲染对应样式 */}
        </Pressable>
      );
    },
    [selectedCategory]
  );

  const scrollToIndex = (index) => {
    FLAT_LIST_REF.current?.scrollToIndex({ index, animated: true });
  };

  return (
    <FlatList
        ref={FLAT_LIST_REF}
        horizontal
        data={categories}
        renderItem={renderItem}
        showsHorizontalScrollIndicator={false}
        ItemSeparatorComponent={itemSeparatorComponent}
        contentContainerStyle={contentContainerStyle}
      />
  )
}

在HomeScreen中传递selectedCategory给Header：

<HomeHeader
  categories={categories}
  contentOffsetY={contentOffsetY}
  handleSelectedCategory={handleSelectedCategory}
  selectedCategory={selectedCategory} // 新增传递选中状态
/>

总结 #

• 通过useEffect监听状态变化来获取最新值，避免在setState后直接console.log
• 将状态提升到父组件统一管理，子组件仅负责展示和触发回调，消除状态不同步的隐患

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