Question

尝试使reducer工作，但每次“默认”情况都会触发。这是代码：

AC：

import {INPUT_IDEA_HANDLE} from "./types"

export function inputIdeaHandle(idea) {
  console.log('it is working, I have access to the idea');
  return {
    type: INPUT_IDEA_HANDLE,
    payload: idea
  }
}

减速器：

import {INPUT_IDEA_HANDLE} from "../actions/types"

export default function (state = null, action) {
  switch (action.type) {
    case INPUT_IDEA_HANDLE :
      console.log('never fires');
      return action.payload;
    default:
      console.log('fires everytime');
      return state
  }
}

import { combineReducers } from "redux";
import inputIdeaReducer from "./inputIdeaReducer.js"

export default combineReducers({
  inputIdea: inputIdeaReducer
});

更新我改变了我的触发器代码，但继续

无法读取未定义的属性'props' 在中返回this.props.inputHandle（value）;

事件触发器：

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { inputIdeaHandle } from "../actions";

class Dashboard extends Component {
  changeHandle(e) {
    e.preventDefault();
    let value = e.target.value;
    return this.props.inputHandle(value);
  }

  render() {
    return (
      <div className="dashboard container">
        <div className="row">
          <div className="col-12">
            <h4>Type your idea here</h4>
            <input
              type="text"
              onChange={this.changeHandle}
              value={this.props.inputIdea}
            />
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    inputIdea: state.inputIdea
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      inputHandle: inputIdeaHandle
    },
    dispatch
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

三重检查了一切，但仍然在控制台中每次都“点火”。依靠你们，伙计们

此致

Answer 1

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

您必须从操作文件中导入操作从＆＃39; ../ containers / actions＆＃39;;

导入{postSelected}

class Home extends Component {
  changeHandle(e) {
    e.preventDefault();
    let value = e.target.value;
     return this.props.post(value);
  }

    <input type="text" onChange={this.changeHandle} />

} //end of class

function mapStateToProps(state) {
  return{
    view: state.view
  }
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({
     post: postSelected,
   },dispatch)
 }

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

这应该可以根据您的需要进行编辑

Answer 2

问题在于处理this上下文。

您可以按照以下方式处理this上下文

constructor

constructor() { super(props); this.changeHandle = this.changeHandle.bind(this)}; }
Arrow function in render：onChange={e => this.changeHandle(e)}
React.createClass：React binds all functions to this.
Bind in render： onChange={this.changeHandle.bind(this)}

为什么减速机不响应动作？

2 个答案: