React 在每次登录后重新渲染页面

编程问答 2022-04-23

问题描述

我正在尝试在我的新网页上实现 twitch 登录。 到目前为止效果很好，直到每次我在 TwitchAuth.tsx 中设置状态时网页都会重新加载。 我认为这完全没问题，所以现在的问题是： 这个小代码有什么问题:)

登录屏幕.tsx

import { useState } from "react";
import { TwitchAuth } from "../../components/TwitchAuth/TwitchAuth";
import "./LoginScreen.css";

export function LoginScreen() {
  const [code,setCode] = useState<string>("");
  const [id,setId] = useState<string>("");

  return (
    <>
      <div>
        <h3>Login with Twitch</h3>
        <TwitchAuth code={code} setCode={setCode} id={id} setId={setId} />
      </div>
    </>
  );
}

TwitchAuth.tsx

import { Component } from "react";
import * as crypto from "crypto";

type TwitchProps = {
  id: string;
  code: string;
  setId: React.dispatch<React.SetStateAction<string>>;
  setCode: React.dispatch<React.SetStateAction<string>>;
};

export class TwitchAuth extends Component<TwitchProps> {
  getLoginUrl = () => {
    const endpoint = process.env.REACT_APP_TWITCH_ID + "oauth2/authorize?";
    this.props.setId(crypto.randomBytes(20).toString("hex"));

    return (
      endpoint +
      new URLSearchParams({
        client_id: process.env.REACT_APP_CLIENT_ID as string,redirect_uri: "http://localhost:3000",response_type: "code",scope: "user:read:email",state: this.props.id,})
    );
  };

  login = async (e: React.MouseEvent<HTMLButtonElement,MouseEvent>) => {
    e.preventDefault();
    window.location.href = this.getLoginUrl();
    const query = window.location.search.substring(
      window.location.search.indexOf("code"),window.location.search.indexOf("&scope")
    );
    this.props.setCode(query); //this triggers the reload
  };

  render() {
    return (
      <>
        {this.props.code ? (
          <>
            <span>Your Code: {this.props.code}</span>
          </>
        ) : (
          <button onClick={(e) => this.login(e)} className="twitch">
            Login with Twitch
          </button>
        )}
      </>
    );
  }
}

任何帮助将不胜感激:) 问候

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjsxjsxjsxreactjsreactjsreactjsreactjstwitchtypescripttypescripttypescript