Question

大家好，我是新来的人，需要进行响应和还原。当我单击提交按钮Form.jsx时，将进行分派，但它显示type属性为undefined。任何想法。

下面这是我的商店代码

import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}

我下面的操作代码

import React, { Component } from "react";
import { connect } from "react-redux";
import uuidv1 from "uuid";
import { addArticle } from "../actions/index";

function mapDispatchToProps(dispatch) {
    return {
        addArticle: article => dispatch(addArticle(article))
    };
}
class ConnectedForm extends Component {
    constructor() {
        super();
        this.state = {
            title: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ [event.target.id]: event.target.value });
    }
    handleSubmit(event) {
        event.preventDefault();
        const { title } = this.state;
        const id = uuidv1();
        this.props.addArticle({ title, id });
        this.setState({ title: "" });
    }
    render() {
        const { title } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label htmlFor="title">Title</label>
                    <input
                        type="text"
                        className="form-control"
                        id="title"
                        value={title}
                        onChange={this.handleChange}
                    />
                </div>
                <button type="submit" className="btn btn-success btn-lg">
                    SAVE
                </button>
            </form>
        );
    }
}
const Form = connect(
    null,
    mapDispatchToProps
)(ConnectedForm);
export default Form;

这是我的Form组件，看起来像下面的代码

driver.Navigate().GoToUrl(desiredUri);

Answer 1

我认为您的mapDispatchToProps方法是错误的。一定是这样的：

const mapDispatchToProps = {        
   addArticle 
}

Answer 2

ADD_ARTICLE类型应该用引号引起来：

// Action creator
export const addArticle = (article) => {
  // returns an action
  return {
    type: 'ADD_ARTICLE',
    payload: article
  };
};

请注意，我也是如何实现payload的，您可能也想看看。

另外，请学习和复习ES6语法，以便您可以充分利用箭头功能的强大功能，而不必使用过多的bind(this)并随后获得更简洁的代码。

动作可能没有未定义的“类型”属性。你在reactjs，redux中拼错了常量吗

2 个答案: