react-redux道具不會渲染組件中的數據

Question

我幾乎讓我的react-redux生態系統發揮作用。但出於某種原因，我無法獲取我的用戶列表。當this.props.users未定義時，render（）方法似乎只調用一次。但是，有幾個實例可以在控制檯中顯示商店內容。所以我不確定數據爲什麼沒有達到這個觀點。

主要

// Store initialization with a test user that should be rendered in view 
... 
const store = createStore (reducers, { 
    users: [{ 
    id: 22, 
    fullname: "Juan Perez", 
    username: "juanperez", 
    email: "juan@perez.io"}] 
}) 

用戶容器

import React, {Component} from 'react'; 
import Table from '../../components/Table' 
import PropTypes from 'prop-types' 
import Form from './form' 
import axios from 'axios' 
import config from '../../config/api' 
import { connect } from 'react-redux' 
import { userListSuccess, addUser, saveUser, removeUser } from '../../actions/users' 

class UsersContainer extends Component { 

    componentDidMount() { 

     var self = this; 

     axios.get(config.path + '/users').then(response => { 
      // DISPATCH USER_LIST_SUCCESS ACTION 
      self.props.onUserListSuccess(response.data); 
     }).catch(function (err) { 
      console.log(err); 
     });; 
    } 

    render() { 

     // HERE this.props.users IS EQUAL TO UNDEFINED 
     console.log(this.props) 

     return (   

      <div>      
       { 
        (typeof this.props.users !== 'undefined') && 
         <Table data={this.props.users} /> 
       } 

       { (this.props.users || []).map((u, i) => { 
        # DEBUGGING: THIS NEVER UPDATES WITH DATA 
        <span>{u.fullname}</span> 
       }) }          
      </div> 
     ); 
    } 
} 

const mapStateToProps = (store, ownProps) => { 
    // THIS SHOWS THE TEST USER I HARCODED IN MY STORE. 
    console.log('test user', store); 
    return { 
     users: store.users.list 
    } 
} 

const mapDispatchToProps = dispatch => { 
    return { 
     onAddUser: (data) => { dispatch(addUser(data)) }, 
     onSaveUser: (data) => { dispatch(saveUser(data)) }, 
     onRemoveUser: (id) => { dispatch(removeUser(id)) }, 
     onUserListSuccess: (users) => { dispatch(userListSuccess(users)) } 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(UsersContainer) 

用戶操作

export function userListSuccess(users) { 

    console.log('server-side users', users); // THIS DISPLAYS 21 USERS 

    return { 
     type: 'USER_LIST_SUCCESS', 
     users 
    } 
} 
... 

你能看出問題出在哪裏？

Answer 1

我相信你的問題是代碼塊：

const mapStateToProps = (store, ownProps) => { 
    // THIS SHOWS THE TEST USER I HARCODED IN MY STORE. 
    console.log('test user', store); 
    return { 
     users: store.users.list 
    } 
} 

store.users是基於測試數據的用戶對象的數組; store.users.list是undefined如果是這種情況，因爲Array對象默認沒有屬性"list"。

Answer 2

所以，正如Yiran Sheng所說，我的測試用戶沒有加載，因爲我在測試json中缺少一個級別。修復我可以在表格中看到我的初始用戶。

然後，第二個問題是由axios調度的動作沒有反映在reducer中。所以我寫了這樣一個：

case 'USER_LIST_SUCCESS': 
    let newState = Object.assign({}, state)  
    newState.list = action.response.data; 
    return newState; 

儘管如此，我認爲無法刷新，但這是一個數據問題。現在商店提供的數據是正確的。謝謝。