TypeError: undefined не является функцией (оценка userItems.map)

Редактировать: теперь я использую «реагировать-native-navigation@latest», все в порядке.

Когда я открываю приложение в первый раз, оно загружает данные правильно, но после второго обновления возникает ошибка

TypeError: undefined не является функцией (оценка 'userItems.map')

эта ошибка находится по адресу:
в Users (созданный Connect(Users));
....

....

Компонент/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"
  },

person Batuhan Sahan    schedule 03.05.2018    source источник
comment
Скорее всего, users из вашего ответа API не является массивом   -  person madox2    schedule 03.05.2018
comment
это массив, я почти уверен, потому что я получил его до того, как сейчас реализую его в своем новом проекте, но не работаю   -  person Batuhan Sahan    schedule 03.05.2018
comment
вы используете реагирующую навигацию в своем коде [как зависимость]?   -  person Rachel Gallen    schedule 04.05.2018


Ответы (3)


Вы уверены, что сопоставляете свое действие внутри MapDispatchToProps? (В идеале этот пост должен быть комментарием, но у меня пока нет прав комментировать).

const mapDispatchToProps = (dispatch) => {
    return {
        fetchUsers: () => dispatch(fetchUsers());
    };    
};
person sxmrxzxr    schedule 03.05.2018
comment
mapDispatchToProps тоже может быть объектом! источник - person El Aoutar Hamza; 03.05.2018

Если /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
        })
      );
  };
}

Или вы можете сделать это внутри редуктора (обратите внимание на свойство items):

const userReducer= (state = initialState, action) => {
    switch(action.type){
        case FETCH_USERS:
             return {
                  ...state,
                  items: action.payload.users 
             }
             default:
             return state;
    }
}
person El Aoutar Hamza    schedule 03.05.2018
comment
я попробовал это, но сначала он правильно загрузил данные, но когда я изменил страницу или обновил страницу, ошибка произошла снова. - person Batuhan Sahan; 03.05.2018
comment
Это может быть связано с тем, где вы вызываете this.props.fetchUsers();, попробуйте вызвать его внутри componentDidMount вместо componentWillMount ` - person El Aoutar Hamza; 03.05.2018

Похоже, ваш код использует поток react-native-router-flux (который имеет в качестве зависимости react-navigation) из приведенного примера кода. Существует нерешенная проблема с этим перечисленным на github. Текущее решение этой проблемы, как обсуждается в этом SO answer, заключается в использовании версии beta26 + react-native router-flux . Я подозреваю, что это решит вашу проблему. Если нет, что ж, стоит попробовать! ..

Хт..

person Rachel Gallen    schedule 03.05.2018
comment
я использую реактивную навигацию: v1.0.0-beta.26, - person Batuhan Sahan; 04.05.2018
comment
Убедитесь, что у вас установлена ​​правильная установка одноранговых зависимостей. Вы используете пряжу или npm? Однажды я получил эту ошибку из-за чего-то другого, и обновление всех моих зависимостей и обновление версии npm помогли исправить ошибку. - person Rachel Gallen; 04.05.2018
comment
Я пытался удалить модули узла и установить снова с помощью пряжи и npm, оба раза с той же ошибкой. Хотя спасибо за попытку помочь - person Batuhan Sahan; 04.05.2018
comment
Я не удалял модули узлов вручную. Я только что обновился до последней версии vsn npm, установил последнюю версию vsn пряжи. А затем использовал пряжу для обновления каждой зависимости. Я думаю, что удалил зависимости из проекта, обновил их глобально и добавил обратно. - person Rachel Gallen; 04.05.2018
comment
Сравните зависимости, которые вы используете, с теми, которые перечислены в вашем package.json, а также в списке зависимостей вашего файла Android. Удалите все ненужное. Я нашел это полезным.. - person Rachel Gallen; 04.05.2018
comment
@RacheIGallen изменил мою навигационную библиотеку на react-native-navigation@latest, теперь все в порядке. И он родной, работает как шарм. - person Batuhan Sahan; 11.05.2018
comment
@BatuhanSahan, не могли бы вы принять мой ответ (наведите указатель мыши рядом с ответом и нажмите на галочку), чтобы отметить это как решенное? Спасибо. - person Rachel Gallen; 19.09.2018