Blink предыдущий результат, прежде чем рендерить новый результат

Question

Я новичок в реакции и избыточности.Я получаю данные со страницы одной страницы и хочу показать детали записи.Когда я нажимаю на список, чтобы увидеть детали в первый раз, это нормально.Но когда я хотел бы видеть детали следующего результата и в течение миллисекунды происходит мигание предыдущего результата, а затем он воспроизводится новым.Не могли бы вы помочь мне с этим вопросом, пожалуйста?Я не хочу видеть детали предыдущего художника.

Показать подробности

import React from 'react';
import { connect } from 'react-redux';
import { fetchArtistDetails } from '../../actions';

class ResultDetails extends React.Component{

    componentDidMount(){

        this.props.fetchArtistDetails(this.props.match.params.id);

    }

    renderList(){
        return this.props.artist.map(artist => {
            return(
                    <div className="ui segment">
                    <br/>
                    <div className="ui two column centered grid">
                    <div className="ui centered massive label">{artist.name}</div>
                    </div>
                    <br/>
                    <br/>
                    { (artist.images) ? 
                        artist.images.map(image =>{
                            return image.type ==='primary' ? <img className="ui centered medium image" src={image.uri}/> : null

                        }) : null
                    }
                    <div className="ui small images">
                    {   (artist.images) ?
                        artist.images.map(image =>{
                            return image.type ==='secondary' ? <img src={image.uri}/> : null

                        }) : null
                    }
                    </div>


                    <p>{artist.profile}</p>
                </div>
      );
    });
}

  render(){
    if (!this.props.artist) {
        console.log("ahoj");
        return <div>Loading...</div>;
      }
    return(
        <div>
         <div>{this.renderList()}</div>
        </div>
    );
}



}

 const mapStateToProps = state => {
    return { artist: state.artistDetails }
   }



export default connect( mapStateToProps , { fetchArtistDetails }) (ResultDetails);

Действия

import discogs from '../apis/discogs';
import history from '../history';
import { FETCH_POSTS, SEARCH_ARTIST, FETCH_ARTIST_DETAILS, CLEAN_ARTIST_DETAILS } from './types';

export const fetchPosts = text => async dispatch => {
    const response = await discogs.get(`/database/search?q=${text}&type=artist`);

    dispatch({ type: FETCH_POSTS, payload: response.data.results });
    history.push(`/results/${text}`);
  };

export const searchArtist = text => dispatch => {
  dispatch({
    type: SEARCH_ARTIST,
    payload: text
  });
};

export const fetchArtistDetails = id => async dispatch => {
  const response = await discogs.get(`/artists/${id}`);

  dispatch({ type: FETCH_ARTIST_DETAILS, payload: response.data });
  history.push(`/details/${id}`);
};

Редуктор

import {
    FETCH_ARTIST_DETAILS,
  } from '../actions/types';


  export default (state = [], action) => {
      switch (action.type) {
        case FETCH_ARTIST_DETAILS:
        return [action.payload]
        default:
          return state;
      }
    };

Приложение

import React, { Fragment } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import MainPage from '../pages/MainPage';
import SearchResult from '../components/searchResult/SearchResult';
import ResultDetails from '../components/resultDetails/ResultDetails';
import Header from './header/Header';
import history from '../history';


const App = () => {
    return (
      <div className="ui container">
        <Router history={history}>
          <div>
            <Switch>
              <Route exact path='/' component={MainPage} /> 
              <Fragment>
              <Header />
              <Route exact path="/results/:id" component={SearchResult} />
              <Route exact path="/details/:id"  component={ResultDetails} />
              </Fragment>        
            </Switch>

          </div>
        </Router>
      </div>
    );
  };

  export default App;

Answer 1

Я нашел и выдаю (не знаю, правильное ли это решение, но оно работает для меня)

Новое действие

export const cleanArtistDetails = () => async dispatch => {

  dispatch({ type: CLEAN_ARTIST_DETAILS, payload: null });

};

Обновление редуктора

import {
    FETCH_ARTIST_DETAILS, CLEAN_ARTIST_DETAILS,
  } from '../actions/types';


  export default (state = [], action) => {
      switch (action.type) {
        case FETCH_ARTIST_DETAILS:
        return [action.payload]
        case CLEAN_ARTIST_DETAILS:
        return null
        default:
          return state;
      }
    };

и компонент обновления

    componentWillUnmount(){
        this.props.cleanArtistDetails();
    }