如何将选择下拉列表的数据从Redux形式传递到Redux中的后端api

Question

I have a redux form where I have 2 input fields and one select drop-down. I wan to store the values of the inputs to a backend api. I am able to get the values from the inputs and pass it to the server, but for some reason I am not able to correctly get the select drop-down value and pass it to the back-end server. I know I am doing some silly mistake with the state, but I am not able to figure out what is that.My file is as shown below:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createPosts } from '../actions/posts_action';

class CreatePost extends Component {
  constructor() {
    super();
    this.state = {
      selectValue : 'react'
  };
  this.handleChange = this.handleChange.bind(this);
  this.renderCategory = this.renderCategory.bind(this);
}

  renderField(field) {
      return(
        <div className="title-design">
            <label className="label-design"> {field.label} </label>
            <input
              type="text"
              className="title-input"
              {...field.input}
            />
            <div className="text-help  has-danger">
              {field.meta.touched ? field.meta.error : ''}
            </div>
      </div>
      );
  }

  handleChange(e) {
    this.setState({selectValue: e.target.value});
    console.log(this.state.selectValue);
  }

  renderCategory(field) {
    return(
      <div className="title-design">
        <label className="label-design">{field.label} </label>

        <select
          name="categories"
          className="title-input"
          value={this.state.selectValue}
          onChange={this.handleChange}  >
              <option value="react">React</option>
              <option value="redux">Redux</option>
              <option value="udacity">Udacity</option>
        </select>
        {this.state.selectValue}
      </div>
    );
  }

    onSubmit(values) {
      this.props.createPosts(values, () => {
          this.props.history.push('/');
      });
    }

    render() {
      const { handleSubmit } = this.props;

      return (
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label="Title for Post"
            name="title"
            component={this.renderField}
          />

          <Field
            label="Post Content"
            name="body"
            component={this.renderField}
          />

          <Field
            label="Category"
            name="category"
            component={this.renderCategory}
          />

          <button type="submit" className="btn btn-primary">Submit</button>
          <Link  to="/">
            <button className="cancel-button">Cancel</button>
          </Link>
        </form>
      );
    }
}

function validate(values) {
  const errors = {} ;

  if (!values.title) {
      errors.title = "Enter a title";
  }

  if (!values.body) {
    errors.body = "Enter some content";
    }

  return errors;
}

export default reduxForm({
  validate : validate,          //validate
  form : 'CreatePostForm'
})(
  connect(null,{ createPosts })(CreatePost)
);

NOTE: Also,I want to generate a unique id for each of the records that is passed to the server so that I can refer to them when I want to retrieve data and display it.Can anyone please guide me how to proceed with both the issues?

Answer 1

setState is not synchronous, it has a callback so you should have something like:

handleChange(e) {
    this.setState({selectValue: e.target.value}, () => {
       console.log(this.state.selectValue);
   });
}

To set the value of the field, you can use change whose signature is:

change(field:String, value:any)

So your handler will just become:

handleChange(e) {
    const value = e.target.value;
    this.props.change("categories", value);
    this.setState({ "selectValue": value }, () => {
      console.log(value);
    });    
}

and in your renderCategory you can remove the value attribute:

... 
<select
    name="categories"
    className="title-input"
    onChange={this.handleChange} >
...

To set some random id for every submission, you can find lots of libraries to generate a random one; to assign to the record, use again change method and field "id" will be sent to the server:

this.props.change('id', <random generated Id>)

See this sandbox a rough implementation