Question

编辑：现在我正在使用＆＃34; react-native-navigation @ latest＆＃34;一切都很好。

当我第一次打开应用 时，数据正确，但第二次刷新错误发生后

TypeError：undefined不是一个函数（评估＆＃39; userItems.map＆＃39;）

此错误位于：
  在用户中（由Connect（用户）创建）;
  ....

...

组件/ Users.js

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

  render() {
    const userItems = this.props.users || [];
    const abc = userItems.map((user,index) => (
      <Text key={index}>
      {user.email}
      </Text>
    ));
    return (
      <View>
        {abc}
      </View>
    );
  }
}
const mapStateToProps = state => ({
  users: state.UserReducer.items
})

const mapDispatchToProps = {
  fetchUsers
};


export default connect(mapStateToProps, mapDispatchToProps)(Users);

操作

export function fetchUsers() {
  return dispatch => {
    fetch("http://example.com/v1/users")
      .then(res => res.json())
      .then(users =>
        dispatch({
          type: FETCH_USERS,
          payload: users
        })
      );
  };
}

减速器/ userReducer.js

import { FETCH_USERS } from "../Actions/types";

    const initialState = {
      items: []
    };

    const userReducer= (state = initialState, action) => {
        switch(action.type){
            case FETCH_USERS:
                return {
                    ...state,
                    items:action.payload
                }
            default:
                return state;
        }
    }
export default userReducer;

减速器/ index.js

import UserReducer from './userReducer';
const AppReducer = combineReducers({
  ...
  UserReducer,
  ...
  ...
  ...
});

export default AppReducer;

后端很好，我跟邮递员一起抄袭

用户后端

  const router = new express.Router();

  router.route("/users").get((req, res) => {
    User.find({},{password:0}, (err, users) => {
      if (err) {
        return res.status(404).send({message: "error"});
        console.log(err);
      } else {
        return res.status(200).send({users});
      }
    });
  });

响应后端

{
    "users": [
        {
            "dateCreated": "..",
            "dateModified": "...",
            "lastLogin": "...",
            "_id": "...",
            "email": "...",
            "__v": 0
        },
        {
            "dateCreated": "..",
            "dateModified": "...",
            "lastLogin": "...",
            "_id": "...",
            "email": "...",
            "__v": 0
        }
    ]
}

package.json依赖项

 "dependencies": {
    "asyncstorage": "^1.5.0",
    "es6-promise": "^4.2.4",
    "react": "16.3.1",
    "react-native": "0.55.3",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "v1.0.0-beta.26",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.9.1",
    "redux-thunk": "^2.2.0"
  },

Answer 1

您确定要在MapDispatchToProps中映射您的操作吗？（理想情况下，这篇文章将是评论，但我还没有评论权限。）

const mapDispatchToProps = (dispatch) => {
    return {
        fetchUsers: () => dispatch(fetchUsers());
    };    
};

Answer 2

如果/users回复如此：

{
    "users": [
        {
            "dateCreated": "..",
            "dateModified": "...",
            "lastLogin": "...",
            "_id": "...",
            "email": "...",
            "__v": 0
        }
    ]
}

然后在调度FETCH_USERS时，您应该这样做:(注意有效负载属性）

export function fetchUsers() {
  return dispatch => {
    fetch("http://example.com/v1/users")
      .then(res => res.json())
      .then(data =>
        dispatch({
          type: FETCH_USERS,
          payload: data.users
        })
      );
  };
}

或者您可以在reducer中执行此操作（请注意items属性）：

const userReducer= (state = initialState, action) => {
    switch(action.type){
        case FETCH_USERS:
             return {
                  ...state,
                  items: action.payload.users 
             }
             default:
             return state;
    }
}

Answer 3

看起来您的代码使用的是react-native-router-flux（它具有react-navigation作为依赖项），来自给定的代码示例。这个listed on github存在一个未解决的问题。正如本SO answer中所讨论的，当前的解决方案是使用beta26版本的react-native router-flux。我怀疑这会解决你的问题。如果不是，那么，值得一试！ ..

H个..

TypeError：undefined不是函数（评估userItems.map）

3 个答案: