狀態未定義（reactJS）

Question

我正在使用React Redux構建應用程序。

這是我的減速器：

import { INCOME_LIST } from '../actionTypes' 

import Immutable from 'immutable' 

const initialUserState = { 
    list: [{ 
        id: 1, 
        label: 'List item 1' 
       }, 
       { 
        id: 2, 
        label: 'List item 2' 
       }] 
} 

const listReducer = function(state = [initialUserState], action) { 
    switch(action.type) { 
    case 'INCOME_LIST': 
     return Object.assign({}, state, { list: action.data }); 

    default: return state; 
    } 

} 

export default listReducer 

這是我的組件：

import React, { Component, PropTypes } from 'react' 
import { Link, browserHistory } from 'react-router' 
import { connect } from 'react-redux' 
import axios from 'axios' 

class Income extends Component { 
    constructor(props) { 
    super(props) 
    } 
    } 

render() { 
console.log(this.props.items) 
     return (
      <div> 
       test 
      </div> 
     ) 
    } 

} 

const mapStateToProps = function(store) { 
    return { 
    items: state.list 
    }; 
} 

export default connect(mapStateToProps)(Income); 

控制檯說： '未定義' 爲什麼執行console.log（this.props.items）獲得undifined？ 如何正確的方式從減速機獲得狀態？可能在那裏犯錯？

Answer 1

三樣東西，我可以看到，

首先在mapStateToProps功能您所定義的變量作爲存儲和使用它作爲狀態。將其更改爲這個

const mapStateToProps = function(state) { 
    return { 
    items: state.list 
    }; 
} 

而且構造後，你有一個額外的}那你當你把你console.log()在render()功能的錯誤的原因。

同樣在你的reducer中，你定義初始狀態的方式使它成爲一個數組。你應該糾正，像state='initialUserState

完整代碼

減速

import { INCOME_LIST } from '../actionTypes' 

import Immutable from 'immutable' 

const initialUserState = { 
    list: [{ 
        id: 1, 
        label: 'List item 1' 
       }, 
       { 
        id: 2, 
        label: 'List item 2' 
       }] 
} 

const listReducer = function(state = initialUserState, action) { 
    switch(action.type) { 
    case 'INCOME_LIST': 
     return Object.assign({}, state, { list: action.data }); 

    default: return state; 
    } 

} 

export default listReducer; 

組件

class Income extends Component { 
    constructor(props) { 
    super(props) 
    } 


render() { 
console.log(this.props.items) 
     return (
      <div> 
       test 
      </div> 
     ) 
    } 

} 

const mapStateToProps = function(state) { 
    return { 
    items: state.list 
    }; 
} 

export default connect(mapStateToProps)(Income); 

Answer 2

您的論點被命名爲store，但您將其稱爲state。 嘗試：

const mapStateToProps = function(state) { 
    return { 
    items: state.list 
    }; 
}