React Native组件状态更新后渲染异常问题求助

问题描述 #

组件状态messageActions已在useEffect中正确更新，但渲染内容未同步变化：

• 本该显示1个操作按钮，但实际未渲染
• 页面显示LEN 0，但控制台日志输出LOG 1，出现状态值与渲染显示不一致的矛盾现象

问题代码 #

export default function MessageActionsModal({ 
  message,
  actions,
  onClose
}) {
  const [dimensions, setDimensions] = useState(null);
  const [messageActions, setMessageActions] = useState([]);

  useEffect(() => {
    if (message !== null) {
      setMessageActions(actions.map((a) => ({
        ...a,
        onPress: () => {
          a.onPress(message?.item);
          onClose();
        }
      })))
    } else {
      setMessageActions([]);
    }
  }, [message, actions, onClose]);
  
  if (message === null) {
    return null;
  }

  return (
    <Portal>
      <TouchableOpacity
        style={styles.messageActionsModal}
        activeOpacity={0}
        onPress={onClose}
      >
        <Portal style={styles.messageActionsModalInnerContainer}>
          <MessageListItem
            style={[
              styles.message,
              getMessagePositionAndDimensions(message)
            ]}
            {...message.item}
          />
          <View
            style={[
              styles.messageActionsMenu,
              getMenuPosition(dimensions, message)
            ]}
            {...dimensions === null && {
              onLayout: ({ nativeEvent }) => setDimensions({
                width: nativeEvent.layout.width,
                height: nativeEvent.layout.height
              })
            }}
          >
            <Text>{'LEN'}{messageActions.length}</Text>
            <Text>{'LOG'}{console.log(messageActions.length)}</Text>

            {messageActions.map((a) => (
              <Button
                key={a.title}
                style={styles.messageActionButton}
                title={a.title}
                variant="text"
                startIcon={a.icon}
                startIconProps={{
                  style: styles.messageActionButtonIconWrapper,
                  iconStyle: styles.messageActionButtonIcon,
                  fill: Colors.yellow
                }}
                onPress={a.onPress}
              />
            ))}
          </View>
        </Portal>
      </TouchableOpacity>
    </Portal>
  );
}

问题原因分析 #

核心问题出在嵌套的<Portal>组件：

1. Portal的特性是将组件挂载到应用根节点之外的原生视图层级，你在外层已使用<Portal>的情况下，内层又嵌套了另一个<Portal>，导致内层组件的渲染上下文脱离了当前组件的状态更新链路。
2. 当messageActions更新时，外层组件触发重渲染，但内层嵌套的<Portal>组件未接收到状态更新通知，仍保持旧状态快照，因此页面显示LEN 0；而console.log在每次重渲染时执行，读取的是最新的messageActions.length，所以控制台输出LOG 1，造成视觉与日志的不一致。

解决方案 #

1. 移除嵌套的<Portal> #

将内层的<Portal>替换为普通<View>，确保所有渲染内容处于当前组件的状态更新链路中：

return (
  <Portal>
    <TouchableOpacity
      style={styles.messageActionsModal}
      activeOpacity={0}
      onPress={onClose}
    >
      {/* 替换内层Portal为View */}
      <View style={styles.messageActionsModalInnerContainer}>
        <MessageListItem
          style={[
            styles.message,
            getMessagePositionAndDimensions(message)
          ]}
          {...message.item}
        />
        <View
          style={[
            styles.messageActionsMenu,
            getMenuPosition(dimensions, message)
          ]}
          {...dimensions === null && {
            onLayout: ({ nativeEvent }) => setDimensions({
              width: nativeEvent.layout.width,
              height: nativeEvent.layout.height
            })
          }}
        >
          <Text>{'LEN'}{messageActions.length}</Text>
          <Text>{'LOG'}{console.log(messageActions.length)}</Text>

          {messageActions.map((a) => (
            <Button
              key={a.title}
              style={styles.messageActionButton}
              title={a.title}
              variant="text"
              startIcon={a.icon}
              startIconProps={{
                style: styles.messageActionButtonIconWrapper,
                iconStyle: styles.messageActionButtonIcon,
                fill: Colors.yellow
              }}
              onPress={a.onPress}
            />
          ))}
        </View>
      </View>
    </TouchableOpacity>
  </Portal>
);

2. 优化状态管理（可选） #

直接通过useMemo推导messageActions，无需额外状态存储，减少状态管理复杂度：

// 移除原有的useState和useEffect，替换为useMemo
const messageActions = useMemo(() => {
  if (message === null) return [];
  return actions.map((a) => ({
    ...a,
    onPress: () => {
      a.onPress(message?.item);
      onClose();
    }
  }));
}, [message, actions, onClose]);

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