Question

我是React和Redux的新手。我正在从一页页面中获取数据，我想显示记录的详细信息。当我第一次从列表中单击以查看详细信息时，就可以了。但是，当我想查看下一个结果的详细信息（毫秒）时，前一个结果会闪烁一下，然后由新的结果重新呈现。您能帮我解决这个问题吗？我不想看到以前的艺术家详细信息。

显示详细信息

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();
    }

在呈现新结果之前闪烁先前的结果

1 个答案: