Question

我学习反应和减少并且有一个问题：我的应用程序渲染没有我的初始状态，但经过一些非常短的时间＆lt; 1s它由于某种原因退出没有状态。：Here is video where i show my issue (i cleared my console before reloading the page)

以下是我的一些代码（没有导入）：

tf.metrics

/////////////////////////////////////////////// ////////// 我减少了：

     const initialStore = {
            recipeList:[
                {id: 0, name: "Sufle", ingredients: ["kartoshka", "shepki", "seledka"]},
                {id: 1, name: "Borsch", ingredients: ["capusta", "blood", "corpse"]},
                {id: 2, name: "Fufel", ingredients: ["leg", "owl's head", "puke"]}
            ]
        }

        let store = createStore(reducer, initialStore);

    ReactDOM.render(
        <Provider store={store}>
            <RecipeBox/>
        </Provider>,
        document.getElementById("root")
    )

/////////////////////////////////////////////// /////////// RECIPEBOX.JS

    export default (state = [], action) => {
        switch (action.type) {
            case 'ADD_RECIPE':
                return [
                    ...state.recipes,
                    { name: action.name, ingredients: action.ingredients, id: action.id }
                ]
            case 'EDIT_RECIPE':
                return [
                    state.recipes.map((recipe) => {
                        if (recipe.id === action.id) {
                            return { name: action.name, ingredients: action.ingredients }
                        }
                        return recipe;
                    })
                ]
            case 'DELETE_RECIPE':
                return state.recipes.filter((recipe) => {
                    return recipe.id !== action.id;
                })
            default:
                return state;
        }
    };

/////////////////////////////////////////////// //////////////// RECIPES.JS

    class RecipeBox extends Component {
        state = {  }
        render() {
            return (
                <div>
                    <Recipes/>
                    <button>Add recipe</button>
                </div>
            );
        }
    }

/////////////////////////////////////////////// //////////////// RecipeList.js

    const mapStateToProps = (state) => {
        console.log(state);  // From here i see that my component renders 2 times
               //this is what you see in my console
        return {recipes: state.recipeList}
    }

    const Recipes = connect(
        mapStateToProps
    )(RecipeList);

/////////////////////////////////////////////// ////////////////////// Recipe.js

const RecipeList = (props) => {
    // console.log(props.recipes); // first render is okay, after rerender = //undefined
    return (
        <ul>
            {props.recipes.map((recipe) =>
                <Recipe
                    className="recipe"
                    name={recipe.name}
                    ingredients={recipe.ingredients}
                    id={recipe.id}
                    key={recipe.id}
                />
            )}
        </ul>
    );
}

React＆amp; Redux自动重新退回并失去状态

0 个答案: