javascript - 状态未定义(reactJS)

Question

我正在使用 React Redux 构建应用程序。

这是我的 reducer :

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) 变得不确定？如何以正确的方式从 reducer 获取状态？那里可能有误？

Answer 1

我能看到的三件事，

首先，在 mapStateToProps 函数中，您将变量定义为存储并将其用作状态。改成这样

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

在构造函数之后还有一个额外的 这就是当您将 console.log() 放在 render() 中时出现错误的原因 函数。

同样在你的 reducer 中，你定义初始状态的方式使它成为一个数组。你应该像 state='initialUserState

这样更正它

完整代码

reducer

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);