Как очистить состояние, чтобы предыдущее состояние не отображалось в текущем компоненте? - PullRequest
Новая
       17

Как очистить состояние, чтобы предыдущее состояние не отображалось в текущем компоненте?

0 голосов
/ 03 апреля 2019

В моем приложении для рецептов, когда пользователь нажимает на определенный рецепт, оно отображает все детали рецепта, на который нажали, в компоненте recipeById . Когда я возвращаюсь на целевую страницу и выбираю другой рецепт в моем пользовательском интерфейсе; сначала он рендерит данные ранее выбранного рецепта и заново рендерит данные вновь выбранного рецепта, что я должен сделать, чтобы его предотвратить ???

recipeReducer.js 

import { GET_RECIPES, GET_RECIPE_BY_ID} from "../actions/types.js"; 
const initialState = { 
      recipes: [],
      recipe:{}
};

export default function (state = initialState, action) { 
    switch(action.type) {
        case GET_RECIPES:
             return {
                     ...state,  
                     recipes:action.payload
                    }; 
        case GET_RECIPE_BY_ID:
             return {
                     ...state,  
                     recipe:action.payload
                    }; 
        default:
             return state; 
}

recipeActions.js 

import { GET_RECIPES, GET_RECIPE_BY_ID} from "./types.js"; 
import axios from 'axios'; 

export const getRecipes = () =>async dispatch => { ... }
export const getRecipeById = (id) =>async dispatch => { 
     const res = await axios.get(`/api/recipe/${id})
     dispatch({
           type:GET_RECIPE_BY_ID,
           payload: res.data
     }); 
}

recipeById.js 

import React, {component} from 'react'; 
import {connect} from 'react-redux'; 
import {getRecipeById} from '../../actions/recipeActions.js'; 
import RecipeCard from './RecipeCard'; 

class RecipeById extends Component {
    constructor(props) {
       super(props); 
     } 

  componentDidMount = async() => {
    this.props.getRecipeById(this.props.match.params.id);    
  }

  render() {
     return(
         <RecipeCard 
           title={recipe.title}
           description={recipe.description}
           image= {recipe.image}
          />
     )
  }
}
const mapStateToProps = state => ({
       recipes: state.recipe.recipes,
       recipe: state.recipe.recipe
}); 
export default connect(mapStateToProps, {getRecipeById})(RecipeById);

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Вам необходимо очистить данные перед размонтированием этого компонента.

Для этого создайте другое действие (например, clearData)

Затем в свой RecipeDetail компонент добавьте componentWillUnmount(), у которого есть объявленное действие: 

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

В вашем редукторе: 

case CLEAR_DATA: 
  return {
    ...state,
    recipe: {}
  }

Таким образом, данные на странице сведений будут удалены перед переходом на страницу списка.

0 голосов
/ 03 апреля 2019

Что решило мою проблему: не передавать все состояние (т. Е. ... состояние), а только то, что требуется компоненту ... 

import { GET_RECIPES, GET_RECIPE_BY_ID} from "../actions/types.js"; 
const initialState = { 
      recipes: [],
      recipe:{}
};

export default function (state = initialState, action) { 
    switch(action.type) {
        case GET_RECIPES:
             return {
                      //...state
                     recipes:action.payload
                    }; 
        case GET_RECIPE_BY_ID:
             return {
                     //...state
                     recipe:action.payload
                    }; 
        default:
             return state; 
}
...