React組件無法通過API映射和呈現數組中的數據

Question

我正在使用react，redux，axios和redux-thunk處理異步。

我有一種解決方案將變得顯而易見的感覺，但是由於某種原因，我無法映射一組用戶（從本地express / node 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);
      });
  }
};

這是我的控制台輸出

Answer 1

您必須在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> 
 );