t_wの輪郭

関数型プログラミング「もう逃げられないぞ♥」
『Reactを関数型プログラミングの文脈で理解する』

Reactで「要素が書き換わらねー」ってしてたんだけど、理解度が低い時のコードが悪さをしていた

修正前

if (post_to_display == null) {
    set_post_to_display(props.post);
}

修正後

useEffect(()=>{
    set_post_to_display(props.post);
}, [props.post]);

うまくいったコード

const [post, set_post] = useState<Post | undefined>(undefined);
useEffect(() => {
    if (post==undefined && post_id) {
        (async () => {
            const post_db = (await API.graphql({
                query: getPost,
                variables: { id: post_id },
                authMode: "API_KEY",
                authToken: awsExports.aws_appsync_apiKey
            }) as GraphQLResult<GetPostQuery>).data?.getPost;
            if (post_db) {
                set_post(post_db)
            }
            console.log({ post_db });
        })();
    }
}, [post_id]);

うまくいかなかったコード（<Link>でDBが読み込まれなくなった・post==undefinedを外すと無限ループ）

const [post, set_post] = useState<Post | undefined>(undefined);
if (post==undefined && post_id) {
    (async () => {
        const post_db = (await API.graphql({
            query: getPost,
            variables: { id: post_id },
            authMode: "API_KEY",
            authToken: awsExports.aws_appsync_apiKey
        }) as GraphQLResult<GetPostQuery>).data?.getPost;
        if (post_db) {
            set_post(post_db)
        }
        console.log({ post_db });
    })();
}

参考にした

• React Hooksでデータを取得する方法

SPAで動いて無駄な読み込みがなくなるので爆速になった。