Компонент React не может отображать и отображать данные в массиве из API

Я использую react, redux, axios и redux-thunk для обработки асинхронности.

У меня есть ощущение, что решение будет очевидным, но по какой-то причине я не могу сопоставить массив пользователей (полученный из локального API экспресса/узла) и отобразить каждого пользователя. Информация о пользователе будет зарегистрирована в консоли, но...

<p>NO USERS FOUND</p>

... вместо этого компонент отображается на экране.

Вот мой репозиторий: https://github.com/tedjames/reduxTest

И вот как выглядит мой компонент:

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { getUsers } from '../redux/actions'

class App extends Component {
  componentWillMount() {
    console.log(this.props);
    this.props.getUsers();
  }

  render() {
    if (this.props.users[1]) {
      this.props.users.map((user) => {
        console.log("USER FOUND!");
        console.log(user.email);
        return <p key={user.id}>USER FOUND: {user.email}</p>
      });
    } else {
      return <p>NO USERS FOUND</p>
    }
  }
}

const mapStateToProps = state => {
  return {
    users: state.admin.users
  };
};

export default connect(mapStateToProps, { getUsers })(App);

И это мое действие, которое использует axios для получения пользователей:

import axios from 'axios'
import { GET_USERS } from './types'

export const getUsers = () => {
  return (dispatch) => {
    axios.get('http://localhost:3090/users')
      .then(res => {
        console.log("<-- // DATA RECEIVED FROM SERVER // --> ");
        console.log(res);
        dispatch({ type: GET_USERS, payload: res.data })
      })
      .catch(({ response }) => {
        console.log("// ERROR RECEIVED FROM SERVER //");
        console.log(response);
      });
  }
};

Вот что выводит моя консоль


reactjs javascript redux axios redux-thunk
person Ted Werbel    schedule 03.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны вернуть массив внутри render (и обернуть его каким-нибудь тегом):

return (
  <div>{ this.props.users.map((user) => {
      console.log("USER FOUND!");
      console.log(user.email);
      return <p key={user.id}>USER FOUND: {user.email}</p> }
  </div> 
 );
person caisah    schedule 03.03.2017
comment
Я хотел бы отметить, что выполнение сопоставления внутри возврата для рендеринга не является хорошей практикой (или выполнение любого логического потока, если на то пошло). Лучше всего вынести всю логику перед оператором return, а затем просто использовать имя переменной внутри return с помощью JSX. - person nbkhope; 03.03.2017
comment
Да! Спасибо Кайса :D - person Ted Werbel; 03.03.2017
comment
Эй, nbkhope, как бы это выглядело? У меня возникли проблемы с настройкой так, как вы рекомендовали - неважно, понятно! - person Ted Werbel; 03.03.2017
comment
Я думаю, что @nbkhope предлагает структуру кода, которую я использую в этом примере: 47fff93c92286db72b22bab5b02e2da3 . - person markerikson; 03.03.2017
comment
@markerikson да, это здорово! Спасибо, что поделились. JSX должен выглядеть чистым и красивым. В качестве дополнительного примечания: иногда вместо того, чтобы иметь что-то перед возвратом, вы также можете вытащить логику в отдельную функцию и вызвать ее из JSX. - person nbkhope; 04.03.2017