切换应用页面时出现Undefined is not a function错误求助

核心原因 #

这个错误本质是代码里的this没有指向组件实例，导致找不到setState方法。结合你提供的代码，可从以下方向排查修复：

解决方案1：确保组件是正确继承的类组件 #

如果你的组件是类组件，必须继承React.Component或React.PureComponent，否则组件实例不会自带setState方法。示例代码：

import React, { Component } from 'react';

class YourComponent extends Component {
  state = {
    logInPageDisplay: 'none',
    signUpPageDisplay: 'none',
    homePageDisplay: 'block',
    mapPageDisplay: 'none',
    messagePageDisplay: 'none',
    user: '',
    password: '',
    message: ''
  }

  handleLogInPagePress = () => {
    this.setState(() => ({
      logInPageDisplay: 'block',
      signUpPageDisplay: 'none',
      homePageDisplay: 'none',
      mapPageDisplay: 'none',
      messagePageDisplay: 'none',
    }));
  }

  render() {
    return (
      <button onClick={this.handleLogInPagePress}>切换到登录页</button>
    );
  }
}

export default YourComponent;

解决方案2：函数组件改用useState钩子 #

如果你的组件是函数组件（用function或箭头函数定义），不能使用this.setState，需用useState钩子管理状态。示例代码：

import React, { useState } from 'react';

const YourComponent = () => {
  const [pageDisplays, setPageDisplays] = useState({
    logInPageDisplay: 'none',
    signUpPageDisplay: 'none',
    homePageDisplay: 'block',
    mapPageDisplay: 'none',
    messagePageDisplay: 'none'
  });
  const [user, setUser] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleLogInPagePress = () => {
    setPageDisplays({
      logInPageDisplay: 'block',
      signUpPageDisplay: 'none',
      homePageDisplay: 'none',
      mapPageDisplay: 'none',
      messagePageDisplay: 'none',
    });
  }

  return (
    <button onClick={handleLogInPagePress}>切换到登录页</button>
  );
}

export default YourComponent;

额外排查点 #

• 检查handleLogInPagePress的调用方式：如果作为props传给子组件，确保子组件调用时没改变this指向（你用了箭头函数，这种情况概率极低）。
• 无需尝试"导入setState"，它是类组件实例的内置方法，单独导入只会引发错误。

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