반응 대화 상자: 정의되지 않은 '상태' 속성을 읽을 수 없습니다.

내 응용 프로그램의 경우 사용자가 로그인해야 하는 보호된 라우터를 배치했습니다. 다음은 로그인 코드입니다.

로그인.jsx:

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      islogged: false,
      loginSettings: {
        lUsername: "",
        lPassword: ""
      }
    };
  };

  handleInput = event => {
    let loginSettingsNew = { ...this.state.loginSettings };
    let val = event.target.value;
    loginSettingsNew[event.target.name] = val;
    this.setState({
      loginSettings: loginSettingsNew
    });
  };

  login = event => {
    let lUsername = this.state.loginSettings.lUsername;
    let lPassword = this.state.loginSettings.lPassword;
    if (lUsername === "admin" && lPassword === "password") {
      localStorage.setItem("token", "T");
      this.setState({
        islogged: true
      });
    } else {
      console.log("Erreur");
    }
    event.preventDefault();
  };

  render() {
    if (localStorage.getItem("token")) {
      return <Redirect to="/" />;
    }
    return (
      <div className="Login">
        <form onSubmit={this.login} className="loginForm">
          <label>
            <span>Username</span>
            <input
              name="lUsername"
              type="text"
              placeholder="Enter your username"
              minLength="5"
              required
              onChange={this.handleInput} />
          </label>
          <label>
            <span>Password</span>
            <input
              name="lPassword"
              type="password"
              placeholder="Enter your password"
              minLength="5"
              required
              onChange={this.handleInput}
            />
          </label>
          <button type="submit" value="submit">Login</button>
        </form>
      </div>
    );
  }
}

export default Login;

이제 이 양식을 재료 UI 양식 대화 상자로 바꾸려고 합니다. 기본적으로 사용자는 응용 프로그램을 시작할 때 동일한 구성 요소(login.jsx)로 보내집니다. 그러나 양식은 사용자가 대화 상자를 열 때만 나타납니다. 이를 위해 다음과 같이 변경했습니다.

Dialog.js:

export default function FormDialog() {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button onClick={handleClickOpen}>
                Open form dialog
      </Button>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>Login</DialogTitle>
                <DialogContent>
                    <label>
                        <span>Username</span>
                        <input
                            name="lUsername"
                            type="text"
                            placeholder="Enter your username"
                            minLength="5"
                            required
                            onChange={handleInput} />
                    </label>
                    <label>
                        <span>Password</span>
                        <input
                            name="lPassword"
                            type="password"
                            placeholder="Enter your password"
                            minLength="5"
                            required
                            onChange={handleInput}
                        />
                    </label>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
          </Button>
                    <Button onClick={login} color="primary">
                        Login
          </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

로그인.jsx:

class Login extends Component {
  constructor(props) {
    super(props);
this.handleInput = this.handleInput.bind(this);
this.login = this.login.bind(this);
    this.state = {
      islogged: false,
      loginSettings: {
        lUsername: "",
        lPassword: ""
      }
    };
  };

  handleInput = event => {
    let loginSettingsNew = { ...this.state.loginSettings };
    let val = event.target.value;
    loginSettingsNew[event.target.name] = val;
    this.setState({
      loginSettings: loginSettingsNew
    });
  };

  login = event => {
    let lUsername = this.state.loginSettings.lUsername;
    let lPassword = this.state.loginSettings.lPassword;
    if (lUsername === "admin" && lPassword === "password") {
      localStorage.setItem("token", "T");
      this.setState({
        islogged: true
      });
    } else {
      console.log("Erreur");
    }
    event.preventDefault();
  };

  render() {
    if (localStorage.getItem("token")) {
      return <Redirect to="/" />;
    }
    return (
      <div className="Login">
        <Dialog />
      </div>
    );
  }
}

export default Login;

export const login = event => {
  let lUsername = this.state.loginSettings.lUsername;
  let lPassword = this.state.loginSettings.lPassword;
  if (lUsername === "admin" && lPassword === "password") {
    localStorage.setItem("token", "T");
    this.setState({
      islogged: true
    });
  } else {
    console.log("Erreur");
  }
  event.preventDefault();
};

export const handleInput = event => {
  let loginSettingsNew = { ...this.state.loginSettings };
  let val = event.target.value;
  loginSettingsNew[event.target.name] = val;
  this.setState({
    loginSettings: loginSettingsNew
  });
};

대화 상자 단추와 양식 대화 상자가 나타나지만 대화 상자를 열 때 다음 오류가 발생합니다.

유형 오류: 정의되지 않은 '상태' 속성을 읽을 수 없습니다.

StackOverflow에 대한 가장 유사한 질문은 함수를 바인딩한다고 말하지만 작동하지 않았습니다./. 그래서 조금이나마 도움을 구하고 싶습니다.

시간을 내어 도와줄 사람에게 미리 감사드립니다.