为什么在使用redux和react.js时我的道具“未定义”

Why are my props `undefined` when using redux and react.js?

本文关键字：未定义 我的 js redux react 为什么      更新时间：2023-09-26

我试图添加一个状态到我的应用程序，只是保存一个布尔当一些事件已经通过。我不知道我哪里做错了。

减速器: 

import * as actionTypes from '../constants/action-types.js';
const initialState = [{
  eventPassed: false
}];
export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return true;
    default:
      return state;
  }
}

行动:

import * as actionTypes from '../constants/action-types';
export function eventPassed(eventPassed) {
  return {
    type: actionTypes.EVENT_PASSED,
    payload: { eventPassed: eventPassed }
  };
}

组件周围的容器:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Example from '../components/example.jsx';
import { eventPassed } from '../actions/app-actions';
class ExampleContainer extends Component {
  render() {
    return (
      <Example {...this.props} />
    );
  }
}
const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({
    eventPassed
  }, dispatch)
});
const mapStateToProps = (state) => ({
  eventPassed: state.eventPassed
});
export default connect(mapStateToProps, mapDispatchToProps)(ExampleContainer);

组件:

import React, { Component, PropTypes } from 'react';
class Example extends Component {
  constructor() {
    super();
    this.action = this.action.bind(this);
  }
  componentDidMount() {
    this.props.actions.eventPassed(true);
  }
  action() {
    console.log(this.props.eventPassed);
  }
  render() {
    return (
      <div>
        <button onClick={this.action}>Action</button>
      </div>
    );
  }
}
export default Example;

当我尝试记录"this.props. . "eventPassed"在 <Example /> 组件它给我"undefined"。是不是少了什么?这似乎是redux中最简单的存储用法。

为什么this.props.eventPassed被记录为"未定义"?:

您此时试图访问的动作函数(eventPassed)在 this.props.actions.eventPassed 不存在。它实际上只存在于 this.props.actions

这是因为您将操作方法绑定到值'actions'在mapDispatchToProps中。这是轮流提供给访问eventPassed通过this.props.actions的动作

由于this.props.actions指向eventPassed，通过尝试访问this.props.actions.eventPassed您正在尝试访问该属性动作eventPassed上的eventPassed。结果是，当您记录此属性时收到"undefined"

其他必要修改:

mapDispatchToProps需要返回一个值

带有块体的箭头函数不会自动返回值，因此必须定义一个值。所以你的函数需要看起来像: 
mapDispatchToProps = (dispatch) => {
  return { actions: bindActionCreators(eventPassed, dispatch) }
}

初始状态是一个包含对象的数组:

const initialState = [{
  eventPassed: false
}];

由于您稍后试图引用它作为object { eventPassed: true}而不是对象[ { eventPassed: true } ]的数组，它应该是:

const initialState = {
  eventPassed: false
};

reducer需要传回正确的更新(但未突变)状态:

export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

你最初所做的是返回一个状态，它不再是一个对象(或者在原始情况下是一个对象数组)，而只是true

的值

在你的reducer你初始化你的状态与数组的对象有eventPassed属性，同时你返回只是布尔值，这是不正确的，因为它取代了初始状态，所以initState可以只是一个对象持有布尔值，你必须返回的状态基于payload发送的动作发送如下:

import * as actionTypes from '../constants/action-types.js';
const initialState = {
  eventPassed: false
};
export default function eventPassed(state = initialState, action) {
  switch (action.type) {
    case actionTypes.EVENT_PASSED:
      return {
        ...state,
        eventPassed: action.payload
      };
    default:
      return state;
  }
}

此外，在您的component中，您可能需要更改:

this.props.eventPassed到this.props.actions.eventPassed

相关文章：