Question

我遇到了问题，我真的可以使用一些帮助。我对React和react-redux非常陌生，因此解决方案可能比我想的要简单（我希望如此）。我有一个简单的网站，其中包含带有配方名称的链接（来自react-router）：

user space

现在，我还有一个组件Post，应该是一个配方。

kernal space

不管我做什么，我似乎都无法使其正常运行。我有一个操作，可以提取单个配方（获取配方列表没有问题），然后将其传递给减速器。但是，当我将console.log（action.payload）放入减速器的情况下，它可以很好地显示控制台中包含配方的对象。但是，当我将{this.props.recipe.name}放入Post.js时，我得到一个错误，指出this.props.recipe是未定义的。任何帮助都非常感谢。可以肯定的是，我还将发布reducer的代码和操作。

减速器：

class Posts extends Component {

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

    componentWillReceiveProps(nextProps) {
        if (nextProps.newPost) {
            this.props.posts.unshift(nextProps.newPost);
        }
    }


    render() {
        const postItems = this.props.posts.map(recipe => (
            <div key={recipe.id}>
                <Link to={`/recipe/id/${recipe.id}`}>{recipe.name}</Link>
            </div>
        ));

        return (

            <Router>
            <div>
                <h1>Well yeah</h1>
                {postItems}
                <Route path={`/recipe/id/:recipeId`} component={Post}/>
            </div>
            </Router>
        );
    }
}
Posts.propTypes = {
    fetchPosts: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired,
    newPost: PropTypes.object,
};

const mapStateToProps = state => ({
    posts: state.posts.items,
    newPost: state.posts.item,
});

export default connect(mapStateToProps, {fetchPosts})(Posts);

动作：

class Post extends Component {
    static propTypes = {};

    componentDidMount() {
        this.props.fetch();
    }

    render() {
        return (
            <div>Hello{this.props.recipe.name}</div>
        );
    }
}

Post.propTypes = {
    fetch: PropTypes.func.isRequired,
    recipe: PropTypes.object
};

const mapDispatchToProps = (dispatch, ownProps) => ({
    fetch: () => {
        dispatch(fetchPostById(ownProps.location.pathname))
    }
});
const mapStateToProps = state => ({

    recipe: state.posts.recipe
});
export default connect(mapStateToProps, mapDispatchToProps)(Post);

主减速器：

const initialState = {
    items: [],
    item: {},
    recipe:{}

};

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_RECIPES:
            return {
                ...state,
                items: action.payload
            };
        case NEW_RECIPE:
            return {
                ...state,
                item: action.payload
            };
        case FETCH_RECIPE_ID:
            return{
                ...state,
                recipe:action.payload
            };
        default:
            return state;
    }

}

Answer 1

在关闭WebStorm过夜后，该网站于第二天早晨启动并运行良好。我对react-router的部分门槛有疑问，但是我将发布其他问题，因此我不会违反任何规则。非常感谢！

Answer 2

在这一行recipe: state.posts.recipe中，您所暗示的是在您的状态下有一个posts对象可以保存您的食谱，但是在reducer中，我看不到您所在状态的任何posts对象。尝试将其更改为此行recipe: state.recipe

react-redux Reducer不会将对象传递给商店

2 个答案: