使用redux和react.js时，为什么我的道具“未定义”？ [英] Why are my props `undefined` when using redux and react.js?

问题描述

我尝试在我的应用程序中添加一个状态，当某个事件通过时，该状态只保存了一个布尔值。我无法弄清楚我在这里做错了什么。

I tried to add a state to my application that just saved a boolean when some event has passed. I can't figure out what I'm doing wrong here.

减速机：

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时 <示例/> 组件，它为我提供了 undefined 。有什么遗失的吗？这似乎是redux中最简单的商店用途。

When I try to log "this.props.eventPassed" in the <Example /> component it gives me "undefined". Is there something missing? This seems to be the most simple use of the store in redux.

推荐答案

为什么this.props.eventPassed记录为undefined？：

此时您尝试访问的操作函数（ eventPassed ）在 this.props.actions.eventPassed 即可。
实际上仅存在于 this.props.actions 。

Why is this.props.eventPassed logged as "undefined"?:

The action function (eventPassed) you are trying to access at this point does not exist at this.props.actions.eventPassed. It actually exists solely on this.props.actions.

这是因为您将action方法绑定到mapDispatchToProps中的值' actions '
。这是转向提供通过 this.props.actions 访问
eventPassed 的操作。

This is because you bound the action method to the value 'actions' in your mapDispatchToProps. This is turn provides gives access to the eventPassed action via this.props.actions.

由于this.props.actions指向 eventPassed ，尝试访问
这个.props.actions.eventPassed 您正在尝试在操作 eventPassed 上访问属性
的'eventPassed'。结果是当你记录这个属性
时，你会收到未定义

Since this.props.actions points to eventPassed, by trying to access this.props.actions.eventPassed you are trying to access the property of 'eventPassed' on the action eventPassed. The result is that when you log for this property you receive "undefined"

---

其他必要的修正：

mapDispatchToProps 需要返回值

---

Other necessary amendments:

mapDispatchToProps needs to return a value

的rel =noreferrer>箭头功能不会自动返回值 ，因此必须定义一个。所以你的函数需要看起来像：

An arrow function with a block body does not automatically return a value and therefore one must be defined. So your function needs to look like:

mapDispatchToProps = (dispatch) => {
  return { actions: bindActionCreators(eventPassed, dispatch) }
} 

---

初始状态是包含对象的数组：

const initialState = [{
  eventPassed: false
}];

因为您之后尝试将其作为对象引用{eventPassed： true} 而不是对象数组 [{eventPassed：true}] 它应该是：

Since you're trying to reference it later as an object { eventPassed: true} and not an array of objects [ { eventPassed: true } ] it should be:

const initialState = {
  eventPassed: false
};

---

减速机需要传回正确更新（但未突变）状态：

---

The reducer needs to pass back the correct updated (but unmutated) state:

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

你最初做的是返回一个状态不再是一个对象（或在原始情况下是一个对象数组），而只是 true的值

What you were initially doing was returning a state that was no longer an object (or in the original case an array of object) but just the value of true

这篇关于使用redux和react.js时，为什么我的道具“未定义”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！