react-redux小道具でデータをレンダリングしないでください

Question

私はほとんど私の反応還元型エコシステムを働かせています。しかし何らかの理由で私はユーザーリストを表示できません。 render（）メソッドは、this.props.usersが未定義のときに一度だけ呼び出されたようです。しかし、コンソールにストアコンテンツを表示できるケースがいくつかあります。だから私はなぜデータがビューに到達していないのか分かりません。問題がどこにある

メイン

// 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はです。Arrayのオブジェクトはデフォルトでプロパティー"list"を持っていないためです。

Answer 2

だから、Yiran Shengが言ったように、私のテストユーザーが私のレベルを逃していたので、私のテストユーザーは読み込んでいませんでした。テーブル内の最初のユーザーを見ることができるように修正しました。

次に、斧で派遣されたアクションが減速機に反映されていないという問題がありました。だから私はこれを書いた：

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

まだ私の意見は更新されませんが、それはdatatable問題でした。今、店舗から提供されたデータは正しいです。ありがとう。