非同期でFirestoreから読んでReactでrender
リアルタイム更新をリスンするかどうかにかかわらず、読み出しAPIはプロミスを返すので非同期。
Reactは状態更新のタイミングで再描画をするのでこれを使う。
結果: Firestore上の値が変わるとブラウザ上の表示も自動的に変わるプロトタイプができた
つまずきポイント
React.Componentは型関数で、第二型引数としてstateの型を取る
与えなかった場合は
{} が与えられたものとして動く定義:
interface Component<P = {}, S = {}, SS = any> その結果
this.state.pieces に対して「Readonly<{}>はpiecesを持たない」ってなるProperty 'pieces' does not exist on type 'Readonly<{}>'.
FirebaseのサンプルではonSnapshotの引数にfunctionを使っているが、このままだとComponentのthisをshadowする
Visual Studio Codeが警告してくれたのでそこにはハマらなかった
だがこの問題の解決方法を僕が正しく理解していなかった
thisがshadowされてアクセスできなくなるので
外のスコープで
let setState = this.setState してこれを使えば良いだろうと考えたPython的発想。Pythonはオブジェクトのメソッドはオブジェクトにバインドされている
JSではそんなことはない。this.setStateは単なる関数
その結果 TypeError: Cannot read property 'updater' of undefined
かつてのJSでは明示的にバインドすることで解決する
const setState = this.setState.bind(this) 今時のES6ではアロー関数が呼び出し時にthisをbindしない(のでshadowしない)ことを使うことができる
今回はこれを使った
>An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.
疑問点
僕はconstructorを使ったが、componentDidMountを使っている人がちらほらいる。何が違うのか。
typescriptclass App extends React.Component<{}, { pieces: any[] }> {
constructor(props: {}) {
super(props);
this.state = { pieces: [] };
db.collection("pieces").onSnapshot((querySnapshot: any) => {
let pieces: any[] = [];
querySnapshot.forEach(function (doc: any) {
pieces.push(doc.data().text);
});
this.setState({ pieces: pieces });
});
}
render() {
let pieces = this.state.pieces.map((x) => <SimplePiece text={x}></SimplePiece>);
return (
<div className="App">
<header className="App-header">
{pieces}
</header>
</div>
);
}
}Related Pages
- →マルチエージェント協調×React×agentic_retrieval-augmented_generation:_a_survey_on_agentic_rag×retrieval-augmented_generation×rag→
- →server-side_rendering×ssr×cgi×ruby_on_rails×django×React×vue.js×シングルページアプリケーション×spa×open_graph_protocol×isr×ssg→
- →自作電子的kj法ツールgrouping×2018×regroup×ipadでの開発×変更履歴を保存×Firestore×初期状態でズームアウトした全体表示モード×ズームアウトした時に意味のある表示にする×ズームインした表示の時に画面外にものがあることに気づけなければならない×矢印を書く機能→
- →regroup×pregroup-done-2019×2020 年、 React 軸で学ぶべき技術×TypeScript×React×webpack×visual_studio_code×styled-components×ReactModal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×Firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]