为什么在使用redux和react.js时我的道具会“不确定”?

吉姆·皮特斯

我尝试将状态添加到我的应用程序,只需保存一个布尔值,当一些事件已经过去了。我无法弄清楚我在做什么错。

减速器:

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

这是因为您将action方法绑定到mapDispatchToProps中的值“ actions ”。依次提供了eventPassed通过提供访问操作的权限this.props.actions

由于this.props.actions点eventPassed,以试图访问this.props.actions.eventPassed你的行动尝试访问“eventPassed”的财产eventPassed其结果是,当你登录该物业收到“未定义


其他必要的修正:

mapDispatchToProps 需要返回一个值

一个箭头功能与块体不会自动返回一个值,因此必须进行定义。因此,您的函数需要如下所示:

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

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

const initialState = [{
  eventPassed: false
}];

由于您稍后尝试将其引用为an,object { eventPassed: true}而不是对象数组,[ { eventPassed: true } ]因此应为:

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

你最初做的是返回该不再是一个对象(或在原来的情况下对象的数组)的状态,但只是价值 true

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我不确定为什么我在使用React Redux时看到未定义

为什么我对React道具感到不确定

为什么我的减速器没有收到我的动作?(使用React和Redux)

使用React和Redux Hooks,为什么我的动作没有触发?

使用 redux 和 react,为什么获取新数据会删除我以前状态的一部分?

不确定为什么我的 redux 状态正在恢复?

为什么我应该使用 redux react native?

我的应用程序在启动时崩溃,我不确定为什么

当我在获取输入类型的函数中输入{}时,为什么会得到不确定的定义

变量不确定-React JS

React Redux -> 为什么我的减速器会这样?

为什么在使用React Redux过滤时我的原始状态会发生变化

分页JS停止工作,我不确定为什么

当我使用env文件时,我在读取vars时不确定

为什么我不能使用Redux从React.js中的数组中删除元素

为什么这个cuda内核会产生不确定的结果?

不确定为什么此Powershell会失败

我不确定为什么会一直收到错误类型'(AnyObject)->()'的值没有成员'currentTitle'

为什么我的User.props总是未定义?React-Native和Redux

为什么我的变量在react-native和redux中重置为零?

为什么componentDidMount在react.js和redux中被多次调用?

为什么React会更改我检查的道具?

我的 javascript 函数出错,不确定我在计算 stv 方程时做错了什么

我不确定为什么我的图像无法渲染?

我不确定为什么我的扳机有问题

我的代码行被跳过,我不确定为什么

当我使用带有Angularjs的GitHub API搜索时我不确定

当我深入到Redux商店时变得不确定

我不确定我是否从 .js 脚本正确调用 .html 和 .json 文件