求助：useLayoutEffect内headerRight图标无法随状态重渲染怎么办

你的问题核心是本地状态与Redux全局状态未同步，加上useLayoutEffect依赖数组冗余，导致headerRight的图标无法响应状态变化。

问题根源 #

1. 你用本地useState维护isMarkedAsFavorite，但Redux的favorites发生变化时（比如其他页面修改收藏），本地状态不会自动更新，useLayoutEffect也就无法触发重新设置headerRight。
2. useLayoutEffect依赖数组里的info是冗余项——headerRight的渲染根本没用到这个状态，反而可能干扰依赖判断逻辑。

修复方案 #

方案一：同步本地状态与Redux状态

添加useEffect监听Redux的favorites变化，实时更新本地收藏状态：

const insets = useSafeAreaInsets()
const { params} = useRoute()
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [info, setInfo] = useState(INITIAL_INFO)
const [isMarkedAsFavorite, setIsMarkedAsFavorite] = useState(false)
const { favorites } = useSelector((state) => state.favorites)

// 同步本地状态与Redux收藏列表
useEffect(() => {
  const isFavorite = favorites.some(item => item.id === params?.item.id)
  setIsMarkedAsFavorite(isFavorite)
}, [favorites, params?.item.id])

useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: params.title,
    headerRight: () => (
      <Icon
        name={isMarkedAsFavorite ? 'heart': 'heart-outline'}
        size={20}
        color={isMarkedAsFavorite ? colors.primary : colors.black}
        style={headerIconStyle}
        onPress={() => {
          if (isMarkedAsFavorite) {
            dispatch(removeFromFavorite({ ...params?.item }))
            // 无需手动更新本地状态，useEffect会监听favorites自动同步
            return
          }
          dispatch(addToFavorite({ ...params?.item }))
        }}
      />
    )
  })
}, [navigation, params, dispatch, isMarkedAsFavorite]) // 移除冗余的info依赖

方案二：直接用Redux状态渲染（无需本地状态）

彻底去掉本地isMarkedAsFavorite状态，直接在headerRight回调内根据Redux的favorites判断收藏状态，逻辑更简洁：

const insets = useSafeAreaInsets()
const { params} = useRoute()
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [info, setInfo] = useState(INITIAL_INFO)
const { favorites } = useSelector((state) => state.favorites)

useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: params.title,
    headerRight: () => {
      // 直接在回调内判断是否在收藏列表
      const isMarkedAsFavorite = favorites.some(item => item.id === params?.item.id)
      return (
        <Icon
          name={isMarkedAsFavorite ? 'heart': 'heart-outline'}
          size={20}
          color={isMarkedAsFavorite ? colors.primary : colors.black}
          style={headerIconStyle}
          onPress={() => {
            if (isMarkedAsFavorite) {
              dispatch(removeFromFavorite({ ...params?.item }))
              return
            }
            dispatch(addToFavorite({ ...params?.item }))
          }}
        />
      )
    }
  })
}, [navigation, params, dispatch, favorites]) // 依赖favorites，确保状态变化时重新设置headerRight

关键说明 #

• 方案一保留本地状态，适合组件其他逻辑需要用到isMarkedAsFavorite的场景；
• 方案二更轻量化，直接依赖全局状态，避免本地与全局状态不同步的问题；
• 两种方案都要确保useLayoutEffect的依赖数组包含所有回调中用到的外部变量，防止闭包捕获旧值。

内容的提问来源于stack exchange，提问作者Muhammad Shahbaz Ali