Question

我正在尝试使用Redux和React，并且在将store返回到我的主app.js文件时遇到了麻烦。

应用程序在运行npm start后正确遵守，然而，应用程序崩溃，我在控制台中遇到错误Failed prop type: The prop store is marked as required in App, but its value is undefined.in App (at index.js:6)

{recipes.length <= 0 && !recipeState.isFetching行发生错误，因为recipes正在返回undefined

我的问题是，如何返回recipes值以使其未定义？

如果我错过了一个文件，我很抱歉。我还在学习反应和减少。

这是我的app.js

import React, {Component} from 'react';
import {Provider} from 'react-redux'; // Make store available to container components
import {Router, browserHistory} from 'react-router'; // Will wrap all the routes we define in our routes file
import PropTypes from 'prop-types'; // Runtime type checking for React props and similar objects.
import {syncHistoryWithStore} from 'react-router-redux';
import configureStore from './store/configureStore'; // Configure the state tree
import routes from './routes/routes'; // Import routes for Router object from react-router

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store); // Sync browser history with redux store

class App extends Component {
    render() {

        console.log("The store is: ", store);

        return (
            <Provider store={store}>
                <div>
                    <Router history={history} routes={routes}/>
                </div>
            </Provider>
        );
    }
}

// Set object types for App.js
// Both store and history are required
App.propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
};

export default App;

以下是导入store

的文件

import {createStore, compose, applyMiddleware} from 'redux';
import thunk from 'redux-thunk'; // Middleware to return functions not actions; async for functions
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    const middlewares = [
        thunk,
    ];

    const store = createStore(rootReducer, initialState, compose(
        applyMiddleware(...middlewares),
        window.devToolsExtension ? window.devToolsExtension() : f => f // add support for Redux dev tools
        )
    );

    // Enable hot updating
    if (module.hot) {

        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextReducer = require('../reducers').default;
            store.replaceReducer(nextReducer);
        });
    }
    return store;
}

这是抛出错误的文件

import React, {Component} from 'react';
// eslint-disable-next-line
import {Alert, Glyphicon, Button, Modal} from 'react-bootstrap';
import {Link} from 'react-router';

export default class Recipes extends Component {
    // eslint-disable-next-line
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.fetchRecipes();
    }

    // TODO what is that?
    showEditModal(bookToEdit) {
        //this.props.mappedshowEditModal(todoToEdit);
    }

    hideEditModal() {
        //this.props.mappedhideEditModal();
    }

    hideDeleteModal() {
        //this.props.mappedhideDeleteModal();
    }

    showDeleteModal(todoToDelete) {
        //this.props.mappedshowDeleteModal(todoToDelete);
    }

    render() {

        const recipeState = this.props.mappedRecipeState;
        const recipes = recipeState.recipes;
        console.log("The recipe state is: ", recipeState);

        return (

            <div className="col-md-12">
                <h3 className="centerAlign">Recipes</h3>
                {!recipes && recipeState.isFetching &&
                <p>Loading recipes .... </p>}
                {recipes.length <= 0 && !recipeState.isFetching && // ERROR OCCURS HERS
                <p>No Recipes Available. Add A Recipe Here.</p>}
                {recipes && recipes.length > 0 && !recipeState.isFetching &&
                <table className="table booksTable">
                    <thead>
                    <tr>
                        <th>Recipe</th>
                        <th className="textCenter">Edit</th>
                        <th className="textCenter">Delete</th>
                        <th className="textCenter">View</th>
                    </tr>
                    </thead>
                    <tbody>
                    {recipes.map((recipe, i) => <tr key={i}>
                        <td>{recipe.recipeText}</td>
                        <td className="textCenter"><Button onClick={() => this.showEditModal(recipe)} bsStyle="info"
                                                           bsSize="xsmall"><Glyphicon glyph="pencil"/></Button></td>
                        <td className="textCenter"><Button onClick={() => this.showDeleteModal(recipe)} bsStyle="danger"
                                                           bsSize="xsmall"><Glyphicon glyph="trash"/></Button></td>
                        <td className="textCenter"><Link to={`/${recipe.id}`}>View Details</Link></td>
                    </tr>)
                    }
                    </tbody>
                </table>
                }
            </div>
        );
    }
}

Answer 1

您可能忘记将初始状态传递到商店。

Route::get('ads/{location?}/{category?}/{keyword?}', 'Categories@check_if_category')->name('route_f_category_page');

Redux Store为状态对象返回undefined

1 个答案: