使用Redux-form,post方法

时间:2018-06-15 15:37:39

标签: reactjs post redux react-redux redux-form

今天我想在我的数据库中使用redux格式发布一些数据,我在控制台中有值,但我真的不懂如何发布新广告

修改

使用this.props.getAdverts()刷新提交时问题已解决 并this.props.addAdvert()在我的提交中发布广告

有什么想法吗?

有我的代码

首先,我有行动动作:

export function addAdvert(data) {
  return dispatch => {
    return fetch("adverts", {
      method: "post",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json"
      }
    });
  };
}

广告形式:

import { Field, reduxForm } from "redux-form";
import React, { Component } from "react";

class AdvertForm extends Component {
  submit() {
    //this
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name"> Name</label>
          <Field name="name" component="input" type="text" />
        </div>
        <div>
          <label htmlFor="surname">SurName</label>
          <Field name="surname" component="input" type="text" />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

AdvertForm = reduxForm({
  form: "advert"
})(AdvertForm);

export default AdvertForm;

我的页面(广告)我不知道在这里调用addAdvert函数的好方法

//imports

    class Adverts extends Component {
      constructor() {
        super();
        this.state = {
          showForm: false
        };
      }
      submit = values => {
        console.log(values); //the console log above
        this.state.addAdvert(values);
        this.props.getAdverts()
      };
      onClick(e) {
        e.preventDefault();
        this.setState({ showForm: !this.state.showForm });
      }

      componentDidMount() {
        this.props.getAdverts();
      }

      render() {
        const { adverts = [] } = this.props;

        return (
          <div>

            //ADVERTSLIST
            <div className="add-advert-btn">
              <Button
                variant="fab"
                onClick={this.onClick.bind(this)}
                color="primary"
                aria-label="add"
              >
                <AddIcon />
              </Button>
            </div>
            {this.state.showForm && <AdvertForm onSubmit={this.submit} />}

          </div>
        );
      }
    }

    const mapStateToProps = state => ({
      adverts: state.todos.adverts
    });

    export default connect(
      mapStateToProps,
      { getAdverts, addAdvert }
    )(Adverts);

0 个答案:

没有答案