ハッカートン特集スリット計画
ハッカートンを行う過程で、ハッカートンによって作成された検索して加入できるIntra Netの提案を受けた.最初は良いことも悪いことも、同じ考えで承諾していたのですが、どうしたのか、スピードが速くなって、本当に配置が夢ではない段階になりました.終わりが近づくと、超人的な力が生まれるのでしょうか?
インプリメンテーションプロセス
に入力されたIntra IDが42 APIに送信され、応答が受信される前に-コンテンツが表示されないか、ロードウィンドウをレンダリングする必要があります. 42 APIの応答が受信され、IDが有効(非エラー)である場合、PatternLockコンポーネントをレンダリングする必要がある. 42 APIの応答を受信し、IDが無効である場合(エラーログインでない場合)、ログインウィンドウに戻るリンクコンポーネントをレンダリングする必要がある.
idResultがfalseでない場合、intraもerrorも、あるコンテンツに入ったことを意味し、3つの演算子に再び区別されます.
上記の条件文が満たされている場合は、存在するIntra Identity 2レンダーログインウィンドウに対応します.そうでない場合は、存在しないIdenty 3レンダーの「戻ってください」リンクに対応します.
話題
インプリメンテーションプロセス
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import {
Entrance,
Login,
Main,
MyPiscine,
RegisterPiscine,
MySubjectView,
Register,
} from "pages";
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/" component={Entrance} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/main" component={Main} />
<Route exact path="/myPiscine/:index" component={MyPiscine} />
<Route
exact
path="/myPiscine/view/:index"
component={MySubjectView}
/>
<Route
exact
path="/registerPiscine/:index"
component={RegisterPiscine}
/>
</Switch>
</Router>
</>
);
};
export default Routes;
こうぞう
ルーティングコンポーネントは、すべての場合のルーティングを処理し、各コンポーネントがLinkにURLを移動することを可能にする.
最初にコンポーネントからログインを試み、既存の42のAPIを使用して、有効なログイン名のみがログインコンポーネントでモードを試行できます.
重要
アプリケーション42 API
https://velog.io/@sham/Fetch-を使用して-42-APIと通信
内容が長すぎるので、リンクを添付しました.
Linkに値を送信する必要がある場合
リンクコンポーネントは、クリックして別のアドレスに移動するコンポーネントで、ブラウザのアドレスを変更する役割を果たします.アドレスが通常のルータと一緒に使用されて移動されると、ルータは移動アドレスの要素にレンダリングを割り当てます.
Router Props、リンク用props
アプリケーションパッケージ
PatternLockという名前のパッケージを使用して簡単なログインを実現することにした.npmドキュメントを見て、ライブラリを適用してみましたが、うまく整理されていて、適用するのは難しくありませんでした.
オーバーラップ&&,3つの演算子テクニック
ログインコンポーネントでは、合計3つの状況の画面を表示する必要があります.
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import {
Entrance,
Login,
Main,
MyPiscine,
RegisterPiscine,
MySubjectView,
Register,
} from "pages";
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/" component={Entrance} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/main" component={Main} />
<Route exact path="/myPiscine/:index" component={MyPiscine} />
<Route
exact
path="/myPiscine/view/:index"
component={MySubjectView}
/>
<Route
exact
path="/registerPiscine/:index"
component={RegisterPiscine}
/>
</Switch>
</Router>
</>
);
};
export default Routes;
アプリケーション42 API
https://velog.io/@sham/Fetch-を使用して-42-APIと通信
内容が長すぎるので、リンクを添付しました.
Linkに値を送信する必要がある場合
リンクコンポーネントは、クリックして別のアドレスに移動するコンポーネントで、ブラウザのアドレスを変更する役割を果たします.アドレスが通常のルータと一緒に使用されて移動されると、ルータは移動アドレスの要素にレンダリングを割り当てます.
Router Props、リンク用props
アプリケーションパッケージ
PatternLockという名前のパッケージを使用して簡単なログインを実現することにした.npmドキュメントを見て、ライブラリを適用してみましたが、うまく整理されていて、適用するのは難しくありませんでした.オーバーラップ&&,3つの演算子テクニック
ログインコンポーネントでは、合計3つの状況の画面を表示する必要があります.
return (
<div className="login-page">
{idResult && (
<>
{idResult !== 'error' ? (
<>
<h1 className="title">WMPB</h1>
<h1>id : {id}</h1>
<PatternLock
width={300}
pointSize={15}
size={3}
path={path}
onChange={pattern => {
handleChangePath(pattern);
}}
onFinish={handleFinish}
/>
</>
) : (
<Link to="/">
<div>존재하지 않는 아이디! 클릭해서 돌아가세요!</div>
</Link>
)}
</>
)}
</div>
);idResultがfalseでない場合、intraもerrorも、あるコンテンツに入ったことを意味し、3つの演算子に再び区別されます.
上記の条件文が満たされている場合は、存在するIntra Identity 2レンダーログインウィンドウに対応します.そうでない場合は、存在しないIdenty 3レンダーの「戻ってください」リンクに対応します.
話題
fetchの同期処理(await)が正しくない問題
import { React, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import PatternLock from 'react-pattern-lock';
import getToken from 'utils/getToken';
import getUserId from 'utils/getUserId';
import './Login.scss';
const Login = ({ location }) => {
const id = location.state.userId;
const [path, setPath] = useState([]);
const [token, setToken] = useState('');
const [idResult, setIdResult] = useState('');
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const tempSetToken = asdf => {
setToken(asdf);
return asdf;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const check = await tempSetToken(response.access_token);
console.log('check');
console.log(check);
console.log('token');
console.log(token);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드
useEffect(() => {
console.log(path);
}, [path]);
return (
<div className="login-page">
{idResult && (
<>
{idResult !== 'error' ? (
<>
<h1 className="title">WMPB</h1>
<h1>id : {id}</h1>
<PatternLock
width={300}
pointSize={15}
size={3}
path={path}
onChange={pattern => {
handleChangePath(pattern);
}}
onFinish={handleFinish}
/>
</>
) : (
<Link to="/">
<div>존재하지 않는 아이디! 클릭해서 돌아가세요!</div>
</Link>
)}
</>
)}
</div>
);
};
export default Login;
tempSetTokenという名前の関数はsetTokenを使用してtokenにタグの値を設定し、チェックで同じ値を返します.同じ関数では、戻る前に値を変更したこともあるので、tokenの値はもちろん更新されたと思いますが、コンソールにはawaitで返されたcheckだけがtokenを含み、tokenは空です.import { React, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import PatternLock from 'react-pattern-lock';
import getToken from 'utils/getToken';
import getUserId from 'utils/getUserId';
import './Login.scss';
const Login = ({ location }) => {
const id = location.state.userId;
const [path, setPath] = useState([]);
const [idResult, setIdResult] = useState('');
const [isFinish, setIsFinish] = useState(false);
let test;
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const modifyToken = token => {
test = token;
return token;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const token = await modifyToken(response.access_token);
console.log('token');
console.log(token);
console.log('test');
console.log(test);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드
useEffect(() => {
console.log(path);
}, [path]);
return (
<div className="login-page">
{idResult && (
<>
{idResult !== 'error' ? (
<>
<h1 className="title">WMPB</h1>
<h1>id : {id}</h1>
<PatternLock
width={300}
pointSize={15}
size={3}
path={path}
onChange={pattern => {
handleChangePath(pattern);
}}
onFinish={handleFinish}
/>
</>
) : (
<Link to="/">
<div>존재하지 않는 아이디! 클릭해서 돌아가세요!</div>
</Link>
)}
</>
)}
</div>
);
};
export default Login;
上記の単純関数ではトークンの受信を待ち,正常,同期的に良好に動作する.
上記の問題を経験する過程で,コードストリームにおいてより高い優位性(上)があっても,受け入れ値がawaitであることが確定しなければ,順序的に遅れているかどうかは簡単なテストにより,結果はそうではないことを示した.
setStateはすぐに有効になりません。
const id = location.state.userId;
const [path, setPath] = useState([]);
const [idResult, setIdResult] = useState('');
const [isFinish, setIsFinish] = useState(false);
let test;
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const modifyToken = token => {
test = token;
return token;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const token = await modifyToken(response.access_token);
console.log('token');
console.log(token);
console.log('test');
console.log(test);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드
上のコードにtestという変数が作成されました.tokenはwaitがtokenを返す前にテストにtokenを割り当てましたが、コンソールを撮ってみると、testにもtokenの値が含まれていることがわかりました.
これはsetState(useState)でstate値を変更する関数がすぐに実行できないためです.いいえ、値がstateになったためか、再レンダリング中にuseEffectを再実行するなど、問題が発生しました.
問題が発生したときにstateを変更すると、構成部品が再レンダリングされることを覚えておいてください.
Reference
この問題について(ハッカートン特集スリット計画), 我々は、より多くの情報をここで見つけました
https://velog.io/@sham/해커톤-특집-틈새-프로젝트
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import { React, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import PatternLock from 'react-pattern-lock';
import getToken from 'utils/getToken';
import getUserId from 'utils/getUserId';
import './Login.scss';
const Login = ({ location }) => {
const id = location.state.userId;
const [path, setPath] = useState([]);
const [token, setToken] = useState('');
const [idResult, setIdResult] = useState('');
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const tempSetToken = asdf => {
setToken(asdf);
return asdf;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const check = await tempSetToken(response.access_token);
console.log('check');
console.log(check);
console.log('token');
console.log(token);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드
useEffect(() => {
console.log(path);
}, [path]);
return (
<div className="login-page">
{idResult && (
<>
{idResult !== 'error' ? (
<>
<h1 className="title">WMPB</h1>
<h1>id : {id}</h1>
<PatternLock
width={300}
pointSize={15}
size={3}
path={path}
onChange={pattern => {
handleChangePath(pattern);
}}
onFinish={handleFinish}
/>
</>
) : (
<Link to="/">
<div>존재하지 않는 아이디! 클릭해서 돌아가세요!</div>
</Link>
)}
</>
)}
</div>
);
};
export default Login;import { React, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import PatternLock from 'react-pattern-lock';
import getToken from 'utils/getToken';
import getUserId from 'utils/getUserId';
import './Login.scss';
const Login = ({ location }) => {
const id = location.state.userId;
const [path, setPath] = useState([]);
const [idResult, setIdResult] = useState('');
const [isFinish, setIsFinish] = useState(false);
let test;
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const modifyToken = token => {
test = token;
return token;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const token = await modifyToken(response.access_token);
console.log('token');
console.log(token);
console.log('test');
console.log(test);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드
useEffect(() => {
console.log(path);
}, [path]);
return (
<div className="login-page">
{idResult && (
<>
{idResult !== 'error' ? (
<>
<h1 className="title">WMPB</h1>
<h1>id : {id}</h1>
<PatternLock
width={300}
pointSize={15}
size={3}
path={path}
onChange={pattern => {
handleChangePath(pattern);
}}
onFinish={handleFinish}
/>
</>
) : (
<Link to="/">
<div>존재하지 않는 아이디! 클릭해서 돌아가세요!</div>
</Link>
)}
</>
)}
</div>
);
};
export default Login; const id = location.state.userId;
const [path, setPath] = useState([]);
const [idResult, setIdResult] = useState('');
const [isFinish, setIsFinish] = useState(false);
let test;
const handleChangePath = pattern => {
setPath(pattern);
};
const handleFinish = () => {
const message = `설정한 패턴은 ${path}입니다!`;
alert(message);
setPath([]);
setIsFinish(true);
};
const modifyToken = token => {
test = token;
return token;
};
// 삭제해도 되는 코드
useEffect(() => {
const fetchId = async () => {
const response = await getToken();
const token = await modifyToken(response.access_token);
console.log('token');
console.log(token);
console.log('test');
console.log(test);
const result = await getUserId(id, token);
console.log(result);
setIdResult(result);
};
fetchId();
}, []);
// 삭제해도 되는 코드Reference
この問題について(ハッカートン特集スリット計画), 我々は、より多くの情報をここで見つけました https://velog.io/@sham/해커톤-특집-틈새-프로젝트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol