从服务器获取时微调器未加载

Question

我有一个组件，当用户更改选择元素中的选项时，它会从服务器获取图像。我添加了一个微调器，所以当我的代码获取图像时，它会同时显示微调器。

目前它显示微调器，这是我第一次选择第一个选项。但是，当我切换到第二个选项时，它不会。最初，我认为这是由于获取过程中的速度造成的，但我注意到某些选项可能需要一两秒钟，并且微调器不显示。请参阅下面的代码：

import React, { Component } from 'react';
import styles from './HomeSearchBreedSection.module.css';
import puppiesPic from '../../Assets/Images/puppies.jpeg';

import Spinner from '../../UI/Spinner/Spinner';

import * as actions from '../../store/actions/index';
import { connect } from 'react-redux';

class HomeSearchBreedSection extends Component {
    componentDidMount() {
        this.props.onFetchDogs();
    }

    // DEAL WITH ERRORS!
    selectOnChangeHandler = (event) => {
        if (event.target.value === 'no breed selected') {
            return;
        } else {
            const { id } = this.props.dogs.find(
                (dog) => dog.name === event.target.value
            );
            this.props.onFetchOneDog(id);
        }
    };

    render() {
        let dogs;
        let filterImg = (
            <img src={puppiesPic} alt="puppies-img" className={styles.PuppiesImage} />
        );

        if (this.props.dogs) {
            dogs = this.props.dogs.map((dog) => (
                <option key={dog.name}>{dog.name}</option>
            ));
        }

        if (this.props.loadingADog) {
            filterImg = <Spinner section="searchDog" />;
        }

        if (this.props.dog.length > 0) {
            const [breed] = this.props.dog;
            filterImg = (
                <img
                    src={breed.url}
                    alt="puppies-img"
                    className={styles.PuppiesImage}
                />
            );
        }

        return (
            <section className={styles.SectionHolder}>
                <article className={styles.SelectSection}>
                    <h2>do you have a breed in mind?</h2>
                    <select
                        className={styles.SelectOption}
                        onChange={(event) => {
                            this.selectOnChangeHandler(event);
                        }}
                    >
                        <option>no breed selected</option>
                        {dogs}
                    </select>
                </article>
                <article className={styles.ResultSection}>
                    <div className={styles.ImageHolder}>{filterImg}</div>
                    <div className={styles.resultInfo}></div>
                    {/* need to work on this */}
                </article>
            </section>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        dogs: state.dogs,
        dog: state.oneDog,
        loadingADog: state.loadingDog,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onFetchDogs: () => dispatch(actions.fetchDogsFromServer()),
        onFetchOneDog: (id) => dispatch(actions.fetchOneDogFromServer(id)),
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(HomeSearchBreedSection);

我正在通过 redux 管理状态，因此请参阅以下操作：

// FETCHING ONE DOG

export const fetchOneDogSuccessful = (dbDog) => {
    return {
        type: actionTypes.FETCH_ONE_DOG_SUCCESS,
        dog: dbDog,
    };
};

export const fetchOneDogFailed = (errorMsg) => {
    return {
        type: actionTypes.FETCH_ONE_DOG_FAILED,
        error: errorMsg,
    };
};

export const fetchOneDogStarts = () => {
    return {
        type: actionTypes.FETCH_ONE_DOG_START,
    };
};

export const fetchOneDogFromServer = (id) => {
    return (dispatch) => {
        dispatch(fetchOneDogStarts());
        axios
            .get(`/images/search?breed_ids=${id}`)
            .then((res) => {
                const fetchedDog = [];
                for (let dog in res.data) {
                    fetchedDog.push({
                        ...res.data[dog],
                    });
                }
                dispatch(fetchOneDogSuccessful(fetchedDog));
            })
            .catch((error) => {
                dispatch(fetchOneDogFailed(error));
            });
    };
};

我现在的减速机：

import * as actionTypes from '../actions/actionTypes';
import updateState from './utility';

const initialState = {
    dogs: [],
    oneDog: [],
    loading: true,
    loadingDog: false,
    error: null,
};

// Fetching all dogs from server

const fetchDogsStart = (state) => {
    return updateState(state, { loading: true });
};

const fetchDogsFailed = (state, action) => {
    return updateState(state, { loading: false, error: action.error });
};

const fetchDogsSucceeded = (state, action) => {
    return updateState(state, { dogs: action.dogs, loading: false });
};

//Fetching one dog from server

const fetchTheDogStart = (state) => {
    return updateState(state, { loadingDog: true });
};

const fetchTheDogFailed = (state, action) => {
    return updateState(state, { loadingDog: false, error: action.error });
};

const fetchTheDogSucceeded = (state, action) => {
    return updateState(state, { oneDog: action.dog, loadingDog: false });
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.FETCH_DOGS_START:
            return fetchDogsStart(state);
        case actionTypes.FETCH_DOGS_FAILED:
            return fetchDogsFailed(state, action);
        case actionTypes.FETCH_DOGS_SUCCESS:
            return fetchDogsSucceeded(state, action);
        case actionTypes.FETCH_ONE_DOG_START:
            return fetchTheDogStart(state);
        case actionTypes.FETCH_ONE_DOG_FAILED:
            return fetchTheDogFailed(state, action);
        case actionTypes.FETCH_ONE_DOG_SUCCESS:
            return fetchTheDogSucceeded(state, action);
        default:
            return state;
    }
};

UpdateState 辅助函数：

const updateState = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties,
    };
};

大家有什么建议吗？

根据下面消息中的要求，我认为共享 redux devTool 日志会很有用。

第一个请求：

第二个请求：

我看到的不同之处在于，在第二次调用中， state 属性中有一个项目。这会是问题吗？

谢谢！