React Native Toolbar按钮显隐问题：如何在Toolbar中获取状态

这个错误我之前也碰到过，大概率是this指向异常或者state未正确初始化导致的，咱们一步步拆解解决：

错误原因分析 #

undefined is not an object on this.state.status 通常有两个核心诱因：

1. 组件未初始化state：类组件里如果没在constructor中定义this.state，直接访问this.state.status自然会报错。
2. this指向丢失：事件处理方法（比如Toolbar的onActionSelected回调）没有绑定正确的this，导致方法内部无法访问组件的this.state。

解决方案 #

1. 类组件场景（最常见） #

步骤1：正确初始化state

在组件的constructor中先调用super(props)，再初始化状态：

constructor(props) {
  super(props);
  // 初始化登录状态，false=未登录，true=已登录
  this.state = {
    isLoggedIn: false
  };
  // 绑定事件方法的this指向
  this.handleActionSelected = this.handleActionSelected.bind(this);
  this.toggleLoginStatus = this.toggleLoginStatus.bind(this);
}

步骤2：动态渲染Toolbar按钮

根据this.state.isLoggedIn的值决定是否展示按钮：

render() {
  // 根据登录状态生成Toolbar的actions
  const toolbarActions = this.state.isLoggedIn ? [
    { title: '个人中心', show: 'always' },
    { title: '退出登录', show: 'always' }
  ] : [];

  return (
    <View>
      <ToolbarAndroid
        style={{ height: 56, backgroundColor: '#2196F3' }}
        title="我的应用"
        titleColor="#fff"
        actions={toolbarActions}
        onActionSelected={this.handleActionSelected}
      />
      {/* 切换登录状态的按钮 */}
      <Button
        title={this.state.isLoggedIn ? '退出登录' : '登录'}
        onPress={this.toggleLoginStatus}
      />
    </View>
  );
}

步骤3：完善事件处理方法

用绑定好的this处理按钮点击：

toggleLoginStatus() {
  this.setState(prevState => ({
    isLoggedIn: !prevState.isLoggedIn
  }));
}

handleActionSelected(position) {
  if (position === 1) {
    // 点击退出登录按钮时切换状态
    this.toggleLoginStatus();
  }
}

2. 函数组件场景（React Native新推荐写法） #

如果用函数组件，直接用useState钩子管理状态，无需担心this指向问题：

import React, { useState } from 'react';
import { ToolbarAndroid, View, Button } from 'react-native';

const MyApp = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleActionSelected = (position) => {
    if (position === 1) {
      setIsLoggedIn(false);
    }
  };

  const toolbarActions = isLoggedIn ? [
    { title: '个人中心', show: 'always' },
    { title: '退出登录', show: 'always' }
  ] : [];

  return (
    <View>
      <ToolbarAndroid
        style={{ height: 56, backgroundColor: '#2196F3' }}
        title="我的应用"
        titleColor="#fff"
        actions={toolbarActions}
        onActionSelected={handleActionSelected}
      />
      <Button
        title={isLoggedIn ? '退出登录' : '登录'}
        onPress={() => setIsLoggedIn(!isLoggedIn)}
      />
    </View>
  );
};

export default MyApp;

额外注意事项 #

• 类组件中，除了在constructor绑定this，还可以用箭头函数定义方法简化代码（比如handleActionSelected = (position) => {}），自动绑定this。
• 确保状态更新用setState（类组件）或useState的更新函数（函数组件），直接修改this.state不会触发组件重渲染。

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