Мое состояние изменяется при повторной визуализации компонента

Question

У меня есть веб-приложение, которое выбирает рецепт из бэкэнд-API. Когда компонент feed монтируется, я установил метод axios get для получения данных от API и обновил свое хранилище с резервированием, а затем обновил состояние компонентов до реквизита, соответствующего состоянию хранилища с использованием mapPropsToState. Он работает, когда компонент визуализируется изначально, но при перемещении к другому компоненту, скажем, Create Recipe, а затем переключении обратно на компонент Feed, содержимое мигает в течение небольшой секундной рекламы, а затем исчезает. И показывает «Нет рецептов для показа», который я настроил для отображения, когда нет рецептов.

Я пытался использовать setState в методе componentDidMount, а затем также в методе .then axios, а также в обоих одновременно. Все тот же результат. Я также попытался записать состояние на консоль, и это показывает, что он получал данные хорошо все время, пока я переключался между компонентами, но данные не будут отображаться на экране.

FEED.JS


import React, {Component} from 'react';
import RecipeCard from './RecipeCard';
import {connect} from 'react-redux';
import {updateRecipes} from '../actions/recipeActions'
import axios from 'axios'

class Feed extends Component {
state = {
    recipes: []
};

feedTitleStyle = {
    color: 'rgba(230, 126, 34, 1)',
    margin: '28px 0'
};

componentDidMount() {
    axios.get('http://127.0.0.1:8000/api/recipes/')
        .then(res =>{
            console.log(res);
            this.props.updateRecipesFromAPI(res.data);
            this.setState({
                recipes: this.props.recipes
            })
        })
        .catch(err => {
            console.log(err)
        });
    let recipes = [...this.state.recipes, this.props.recipes];
    this.setState({
        recipes
    })

}


render() {

    const {recipes} = this.state;
    console.log(this.props.recipes);
    console.log(recipes);
    const recipesList = recipes.length ? (
        recipes.map(recipe => {
            return (
                <div className="container" key={recipe.id}>
                    <div className='col-md-10 md-offset-1 col-lg-9 mx-auto'>
                        <div className="row">
                            <div className="col s12 m7">
                                <RecipeCard recipe={recipe}/>
                            </div>
                        </div>
                    </div>
                </div>
            )
        })
    ) : (
        <div className='center'>No recipes yet</div>
    );
    return (
       <div>
           <div className='container'>
               <h4 style={this.feedTitleStyle} className='center feed-title'>Feed</h4>
               {recipesList}
           </div>
       </div>
    )
}
}
const mapStateToProps = (state) => {
    return{
        recipes: state.recipes
    }
};

const mapDispatchToProps = (dispatch) => {
return {
    updateRecipesFromAPI: (recipes) => {dispatch({
    type: 'UPDATE_RECIPES',
    recipes
}}
}
};

export default connect(mapStateToProps, mapDispatchToProps)(Feed)

Вот мой редуктор:

const initialState = {
  recipes: [],
};

const recipeReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_RECIPES':
            let updatedRecipes = [...state.recipes, action.recipes];
            console.log(updatedRecipes[0]);
        return {
                ...state,
                recipes: updatedRecipes[0]
            };
        default:
            return state
    }
};

export default recipeReducer

Answer 1

Вы манипулируете между REDUX и State , что неверно, вы не должны этого делать, вместо этого идеальным решением было бы придерживаться REDUX и позволить REDUX выполнить вызовите асинхронно и заполните store и используйте mapStateToProps, чтобы получить его в реквизит.

используйте Action Creators (Async), чтобы решить эту проблему, вы должны использовать промежуточное ПО, например thunk ( Thunk ), чтобы сделать это.

Создатели действий:

export const updateRecipesFromAPI_Async = () => { // async action creator
    return dispatch => {
        axios.post('http://127.0.0.1:8000/api/recipes/')
            .then(response => {
                console.log(response.data);
                dispatch(updateRecipesFromAPI_Success(response.data.name, orderData)); // calls a sync action creator
            })
            .catch(error => {
                console.log(error);
            });
    }
}

export const updateRecipesFromAPI_Success = (recipes) => { // sync action creator
    return {
        type: 'UPDATE_RECIPES',
        orderData: recipes
    }
}