Javascript 如何使用react js将选择选项数据添加到服务器中

我目前正在使用react js进行一个电子商务项目。存在保存/添加用户数据的问题，尤其是性别选择选项。任何人都可以帮助解决这个问题

我使用react select作为用户源中的组件：

用户表格： 这是用于创建用户的用户表单组件

import React, { Component, Fragment } from "react";
import { Tabs, TabList, TabPanel, Tab } from "react-tabs";
import PropTypes from "prop-types";
import { register } from "../../redux/actions/auth";
import { createMessage } from "../../redux/actions/message";
import { connect } from "react-redux";
import Select from "react-select";

export class Tabset_user extends Component {
  state = {
    first_name: "",
    last_name: "",
    username: "",
    email: "",
    password: "",
    password2: "",
    gender: [],
  };
  static propTypes = {
    register: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool,
  };
  onSubmit = (e) => {
    e.preventDefault();
    const {
      first_name,
      last_name,
      username,
      email,
      password,
      password2,
      phone,
      gender,
    } = this.state;
    if (password !== password2) {
      //   this.props.createMessage({ passwordNotMatch: "Passwords do not match" });
      alert("Password don't match");
    } else {
      const newUser = {
        first_name,
        last_name,
        username,
        password,
        email,
        phone,
        gender,
      };
      this.props.register(newUser);
    }
  };
  onChange = (e) => this.setState({ [e.target.name]: e.target.value });
  handleChange = (value) => {
    this.setState({ gender: value });
  };

  render() {
    const options = [
      { value: "Male", label: "Male" },
      { value: "Female", label: "Female" },
      { value: "Perfer Not To Say", label: "Perfer Not to Say" },
    ];
    const {
      first_name,
      last_name,
      username,
      email,
      password,
      password2,
      phone,
    } = this.state;

    return (
      <Fragment>
        <Tabs>
          <TabList className="nav nav-tabs tab-coupon">
            <Tab className="nav-link">Account</Tab>
            <Tab className="nav-link">Permission</Tab>
          </TabList>
          <TabPanel>
            <form
              className="needs-validation user-add"
              onSubmit={this.onSubmit}
            >
              <h4>Account Details</h4>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">First Name</label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="first_name"
                  type="text"
                  name="first_name"
                  value={first_name}
                  onChange={this.onChange}
                  placeholder="First Name"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">Last Name</label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="validationCustom1"
                  type="text"
                  name="last_name"
                  value={last_name}
                  onChange={this.onChange}
                  placeholder="Last Name"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">
                  <span>*</span> Email
                </label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="email"
                  type="email"
                  name="email"
                  value={email}
                  onChange={this.onChange}
                  placeholder="Email Address"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">
                  <span>*</span> Username
                </label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="username"
                  type="text"
                  name="username"
                  value={username}
                  onChange={this.onChange}
                  placeholder="Username"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">
                  <span>*</span> Password
                </label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="validationCustom3"
                  type="password"
                  name="password"
                  value={password}
                  onChange={this.onChange}
                  placeholder="Password"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">
                  <span>*</span> Confirm Password
                </label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="validationCustom4"
                  type="password"
                  name="password2"
                  value={password2}
                  onChange={this.onChange}
                  placeholder="Confirm Password"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">Gender</label>
                <Select
                  className="form-control col-xl-8 col-md-7"
                  options={options}
                  value={this.state.gender}
                  onChange={this.handleChange}
                  name="gender"
                />
              </div>
              <div className="form-group row">
                <label className="col-xl-3 col-md-4">Phone</label>
                <input
                  className="form-control col-xl-8 col-md-7"
                  id="phone"
                  type="number"
                  name="phone"
                  value={phone}
                  onChange={this.onChange}
                  placeholder="Phone Number"
                />
              </div>
              <div className="pull-right">
                <button type="submit" className="btn btn-primary">
                  Save
                </button>
              </div>
            </form>
          </TabPanel>
        </Tabs>
      </Fragment>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});

export default connect(mapStateToProps, { register, createMessage })(
  Tabset_user
);

 import * as types from "../../constants/actionTypes";
        import axiosInstance from "./axios";
        // LOGIN USER
        export const login = (username, password) => (dispatch) => {
          const body = {
            username: username,
            password: password,
          };

          axiosInstance
            .post("api/token/obtain/", body)
            .then((res) => {
              console.log(res);
              axiosInstance.defaults.headers["Authorization"] =
                "JWT " + res.data.access;
              dispatch({
                type: types.LOGIN_SUCCESS,
                payload: res.data,
              });
            })
            .catch((err) => {
              console.log(err);
              // dispatch(returnErrors(err.response.data, err.response.status));
              dispatch({
                type: types.LOGIN_FAIL,
              });
              // alert("Invalid username and Password");
            });
        };

        // REGISTER USER
        export const register = ({
          first_name,
          last_name,
          email,
          username,
          password,
          phone,
          gender,
        }) => (dispatch) => {
          // Request Body
          // const body = {
          //   first_name: first_name,
          //   last_name: last_name,
          //   email: email,
          //   username: username,
          //   password: password,
          // };
          axiosInstance
            .post("/api/user/create/", {
              first_name,
              last_name,
              email,
              username,
              password,
              phone,
              gender,
            })
            .then((res) => {
              console.log(res);
              dispatch({
                type: types.REGISTER_SUCCESS,
                payload: res.data,
              });
              // history.push(`${process.env.PUBLIC_URL}/pages/create-page`);
            })
            .catch((err) => {
              // dispatch(returnErrors(err.response.data, err.response.status));
              dispatch({
                type: types.REGISTER_FAIL,
              });
            });
        };

        //LOGOUT USER
        export const logout = () => (dispatch) => {
          try {
            const response = axiosInstance.post("api/blacklist/", {
              refresh_token: localStorage.getItem("refresh"),
            });
            if (
              response
                .then((data) => {
                  if (data.statusText === "Reset Content") {
                    localStorage.removeItem("access");
                    localStorage.removeItem("refresh");
                    axiosInstance.defaults.headers["Authorization"] = null;
                    dispatch({
                      type: types.LOGOUT_SUCCESS,
                    });
                  }
                })
                .catch((err) => console.log(err))
            );
          } catch (e) {
            console.log(e);
          }
        };