Выполнение ajax вызовов с реакцией при использовании маршрутизатора реакции - PullRequest
0 голосов
/ 16 апреля 2020

Я просто хотел подтвердить, ожидается ли вывод консоли, который я вижу ниже, или я сделал что-то не так.

У меня есть следующий код реакции:

function BlogPost() {
    let location = useLocation();

    const [error, setError] = React.useState<string>(null);
    const [isLoading, setLoading] = React.useState<boolean>(true);
    const [posts, setPosts] = React.useState<PostModel[]>([]);

    React.useEffect(() => {
        fetch("http://localhost:63166/api/posts/")
            .then(res => res.json())
            .then((posts: PostModel[]) => {
                setPosts(posts);
                setLoading(false);
            },
                (error) => {
                    console.log(error);
                    setLoading(false);
                    setError(error);
                })
    }, []);
    if (!posts || posts.length < 1) {
        console.log("not found");
        return (
            <NotFound />
        );
    }
    else if (error) {
        console.log("error");
        return (
            <Error />
        );
    }
    else if (isLoading) {
        console.log("loading");
        return (
            <div>Loading...</div>
        );
    }
    console.log("routes");
    return (
        <TransitionGroup>
            <CSSTransition
                key={location.key}
                classNames="fade"
                timeout={300}>
                <Switch location={location}>
                    <Route exact={true} path="/blog">
                        <AllPosts posts={posts} />
                    </Route>
                    <Route path="/blog/:postName">
                        <Post posts={posts} />
                    </Route>
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    );
}

export default function Index() {
    console.log("start");
    return (
        <section id="blog" className="section">
            <div className="container section-wrapper">
                <Router>
                    <BlogPost />
                </Router>
            </div>
        </section>
    );
}

Когда я перейдите на страницу / blog. В окне консоли разработчика я вижу следующее:

enter image description here

Это правильно? Я использую React 16.13.1, response-router 5.1.2 и response-transition-group 4.3.0.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...