React中useState变量focus在onPressIn/onPressOut触发时不更新求助

问题1：console.log输出旧值的原因 #

React的setState是异步操作，调用setFocus(true)后，当前代码块里的focus变量还是闭包捕获的旧值，不会立刻更新。所以你在onPressIn里直接console.log(focus)，看到的永远是调用setFocus之前的状态。

问题2：状态未正确更新（UI无变化）的原因 #

你把focus状态放在父组件LiveTV里，而Item组件定义在LiveTV内部——每次LiveTV的状态变化，Item都会被重新定义，导致组件重复渲染，状态更新被干扰。更关键的是：所有Item实例共享同一个父组件的focus状态，这意味着点任何一个Item，所有Item的焦点样式都会一起变化，这显然不符合需求。

修复方案 #

把focus状态移到Item组件内部，让每个频道卡片自己管理自己的焦点状态：

const LiveTV = () => {
  // 保留你的其他状态，比如setChannelPlaying

  // 让Item组件内部管理自身的focus状态
  const Item = ({ item }) => {
    const [focus, setFocus] = useState(false);
    return (
      <Pressable
        style={[styles.channelView, focus ? styles.wrapperFocused : null]}
        onPress={() => {
          setChannelPlaying(item);
        }}
        onPressIn={() => {
          setFocus(true);
        }}
        onPressOut={() => {
          setFocus(false);
        }}
      >
        {/* 这里填充频道相关内容 */}
      </Pressable>
    );
  };

  // 后续渲染Item列表的逻辑
};

如果需要查看更新后的focus状态，可以用useEffect监听状态变化：

const Item = ({ item }) => {
  const [focus, setFocus] = useState(false);

  useEffect(() => {
    console.log('当前focus状态:', focus);
  }, [focus]);

  // ...其余代码
};

额外说明 #

如果你的场景需要父组件统一管理焦点（比如电视端遥控器导航），那就不能用onPressIn/onPressOut，应该改用Pressable的onFocus/onBlur事件，同时要把Item组件定义在LiveTV外部，或者用useCallback包裹，避免组件重复创建导致状态异常。

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