mapStateToProps is not defined



1.有人可以帮助我哪里做错了吗?2.组件我正在将状态映射到其属性,但我仍然得到这个 错误"mapStateToProps is not defined" 这是下面的整个组件。错误显示为"mapStateToProps 未定义">

    import React, {Component} from 'react';
    import Icon from 'react-native-vector-icons/EvilIcons';
    import  { loadInitialPosts} from './actions';
    import {connect } from 'react-redux';  
    import _ from 'lodash';
    import {View, StyleSheet,FlatList} from  'react-native';
    import PostItem from './PostItem';
    import PostDetail from './PostDetail';
    class PostsList extends Component {
    componentWillMount() {
        this.props.loadInitialPosts();
    }
    renderItem({item}){
        return <PostItem posts = { item } />;
    }
    renderInitialView(){
        if(this.props.postDetailView === true){
            return(
               <PostDetail />
          );
        } 
    else{
        return(
            <FlatList 
            data={this.props.posts} 
            renderItem={this.renderItem} />
           )}
         }
    render(){
        return(
            <View style={styles.list}>
                {this.renderInitialView()}
            </View>
              );
            }
            }
    const mapStateToProps = state => {
        const posts = _.map(state.posts, (val, id) => 
          {
            return { ...val, id};
          });
        return{ 
            posts: posts,
            postDetailView: state.postDetailView,
              };
                              }
    export default connect(mapStateToProps, { loadInitialPosts })(PostsList)

1.这是调度数据的操作

     export const loadInitialPosts = () => { 
         return function(dispatch){
             return axios.get(apiHost 
                +"/api/get_posts? 
                count=20")
             .then((response) => {
                 dispatch({ type: 
                 'INITIAL_POSTS_FETCH', payload: 
                  response.data.posts});
              }).catch((err) => {
                    console.log(err);
            });
        };
    };
mapStateToProps

export default connect(mapStateToProps)(SomeClass)之前坐在类之外

class SomeClass extends React.Component {
  ...
}
const mapStateToProps = state => {
  const posts = _.map(state.posts, (val, id) => {
    return { ...val,
      id
    };
  });
  return {
    posts: posts,
    postDetailView: state.postDetailView,
  };
}

为了消除未定义mapStateToProps的可能性,请考虑直接在调用connect()中定义mapStateToProps,如下所示:

class PostsList extends React.Component {
    componentWillMount() {
        this.props.loadInitialPosts();
    }
    renderItem({item}){
        return <PostItem posts = { item } />;
    }
    renderInitialView(){
        if(this.props.postDetailView === true){
            return <PostDetail />;
        } 
        else{
            return <FlatList 
            data={this.props.posts} 
            renderItem={this.renderItem} />
        }
    }
    render(){
        return(<View style={styles.list}> {this.renderInitialView()} </View>);
    }
}
/* 
Avoid declaration of mapStateToProps object by defining this object
directly in the call to connect()
*/
export default connect((state => {
    return {
        posts : state.posts.map((val, id) => ({ ...val, id })),
        postDetailView: state.postDetailView,
    }
}), { loadInitialPosts })(PostsList)

相关内容

  • 没有找到相关文章