React应用：跨页面调用函数失败及导航栏显示控制问题求助

我来帮你搞定这两个问题，先从导航栏的显示逻辑说起，再处理那个未定义的错误。

一、登录页隐藏导航栏，其他页面显示的解决方案 #

你现在遇到的Authen.js无法调用App.js函数的问题，其实不用硬传函数，换个思路更顺畅：

方案1：通过路由路径直接判断（最省心） #

如果你的登录页路由是/login，那在App.js里可以直接根据当前路径决定是否渲染导航栏，完全不用跨组件传函数：

import { withRouter } from 'react-router-dom'; // 类组件需要这个高阶组件

class App extends Component {
  render() {
    const { pathname } = this.props.location;
    return (
      <div className="app-container">
        {/* 不是登录页就显示导航栏 */}
        {pathname !== '/login' && <YourNavbarComponent />}
        
        <Routes>
          <Route path="/login" element={<Authen />} />
          {/* 其他页面路由 */}
        </Routes>
      </div>
    );
  }
}

// 类组件必须用withRouter包裹才能拿到location属性
export default withRouter(App);

登录成功后跳转到其他页面，导航栏会自动显示，逻辑简单直接。

方案2：状态提升+回调函数（按登录状态控制） #

如果你的需求是登录成功后才显示导航栏（而非单纯匹配路径），可以在App里维护登录状态，把更新状态的回调传给Authen：

App.js中：

class App extends Component {
  state = {
    isLoggedIn: false, // 初始未登录状态
  };

  // 定义更新登录状态的函数
  handleLoginSuccess = () => {
    this.setState({ isLoggedIn: true });
  };

  render() {
    return (
      <div className="app-container">
        {/* 登录成功后才渲染导航栏 */}
        {this.state.isLoggedIn && <YourNavbarComponent />}
        
        <Routes>
          {/* 把回调函数传给Authen组件 */}
          <Route path="/login" element={<Authen onLoginSuccess={this.handleLoginSuccess} />} />
          {/* 其他页面路由 */}
        </Routes>
      </div>
    );
  }
}

然后在Authen.js的登录逻辑里，成功后调用这个回调：

// Authen.js里的登录按钮点击事件
handleLogin = async () => {
  // 这里写登录接口调用逻辑
  const loginResult = await yourLoginApi();
  
  if (loginResult.success) {
    // 触发App里的状态更新
    this.props.onLoginSuccess();
    // 跳转到首页或其他页面
    this.props.history.push('/');
  }
};

二、解决App.js第69行'operation' is not defined错误 #

这个错误很直白：你在第69行用到了operation变量，但没提前声明它。你可以从这几个方向排查：

• 是不是漏了变量声明？比如直接写operation = xxx，正确应该是const operation = xxx或let operation = xxx；
• 如果operation是组件状态的一部分，那是不是没在state里初始化，或者使用时没加this.state.？比如：

  class App extends Component {
    state = {
      operation: '' // 先初始化状态
    };
  
    someMethod() {
      // 使用时要通过this.state获取
      console.log(this.state.operation);
      // 更新时用this.setState
      this.setState({ operation: 'newValue' });
    }
  }
  

• 是不是拼写错误？比如本来要写operations，不小心写成了operation。

找到第69行的operation使用位置，按上面的方法修正就能解决这个问题。

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