为什么我在 React 中的 fetch function（和构造函数）被调用了两次？

Question

EDIT: Changed the title since I removed <React.StrictMode> from my index.ts and now the constructor and the fetch function inside it get called twice.

I am creating a URL Shortner Service, and I am stuck on the bit where a user visits the frontend URL with the hash code and then is redirected to the original URL. I am doing this project mostly in Typescript.

I am using Node JS and Express as my Backend with Mongo as my DB. It is running on port 3001.

I am using React, React-Router, and Redux for my frontend. It is running on port 3000.

So my Routes.js file looks like this

import React from "react";
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
import Rerouting from "../pages/Rerouting/Rerouting"


const Routes = () => (
    <Router>
        <Switch>

            <Route
                path="/:urlCode"
                exact={true}
                component={Rerouting}
            />

        </Switch>
    </Router>
);

My Rerouting.tsx file looks like this

import React from 'react';
import { connect } from "react-redux";
import BackendHandler from "../../BackendHandler";


class Rerouting extends React.Component {

    constructor(props) {
        super(props)
        BackendHandler.fetch(BackendHandler.REROUTE, props.match.params.urlCode);
    }

    render() {
        const originalUrlFromBackend = this.props["backend"].map((item: { originalUrl: string; }) => item.originalUrl)
        return (
            window.location.href = originalUrlFromBackend 
            )
    }

}

function mapStateToProps(state) {
    return {
        backend: state.backend.urlData,
    }
}

export default connect(mapStateToProps)(Rerouting);

The relevant parts of my BackendHandler.ts file look like this

import store from './redux/store/index';
import {
    backendRequestFailed,
    backendRequestSent,
    backendRequestSucceeded
} from "./redux/actions/fetchFromBackendActions";


class BackendHandler {
    static URL: string;
    static REROUTE: string;
    static fetch(path, params, data = null, init = {}) {
        store.dispatch(backendRequestSent());

        const path_with_params: string = path + params
        fetch(path_with_params, {
            ...init,
            method: "GET",
            body: data,
            credentials: "same-origin",
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(BackendHandler._fulfillFetchHandler, BackendHandler._rejectHandler);
    }

    static _fulfillFetchHandler(response) {
        switch (response.status) {
            case 200:
                response.json().then(BackendHandler._jsonToStore) 
            default:
                store.dispatch(backendRequestFailed())
        }
    }

    static _rejectHandler(error) {
        store.dispatch(backendRequestFailed())
    }

    static _jsonToStore(json) {
        store.dispatch(backendRequestSucceeded(json));
    }

}

BackendHandler.REROUTE = "http://localhost:3001/"

export default BackendHandler;

The problem I am facing right now is that when I visit the frontend URL with a hash code (eg - HTTP://localhost:3000/lol), I see this in my console

and I see this in my Redux state

As you can see, my urlData does exist, and here is a closer look at it.

This means my backend is working fine and sending the response. But then the last error I see is

This is probably because, by the time this.props.backend is called, the backend state has not updated. So how do I get out of this error hell and fix it?

Answer 1

You should call asynchronous tasks oncomponentDidMount() method. Once the promise gets fulfilled the redux store will dispatch the event for reloading a connected component with the new props.

Documentation says literally

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

There is also no need for creating a React.Component just for making an async call to a remote server. The render method of a component should returns a ReactNode = HTML code. You need also to verify that your backend prop is not undefined