ReactJs - Как сделать сопоставление для каждого списка Ax ios Метод сообщения?

Question

Я пытаюсь реализовать список сообщений API в форме Dynami c, но я не могу правильно разместить данные в форме Dynami c здесь это весь мой код, что я сделал. Когда я отправляю запрос на отправку из моей формы все отображение данных, но только призы элемент списка не отображается, я пытался использовать отображение, но все же я могу решить мою проблему, пожалуйста, подскажите, где я делаю ошибку

import React, { Component } from "react";
import { Helmet } from "react-helmet";
import Form from "./Form";
import Additional from "./Additional";
import Prize from "./Prize";
import Swal from "sweetalert2";
import axios from "axios";
import { withTranslation } from "react-i18next";

class Create extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHidden: true,
      title: "",
      lead: "",
      span: "",
      without: "",
      startDate: null,
      endDate: null,
      parameter: "",
      prizes: [
        {
          number_list: [],
          prize_type: "",
          name: "",
          value: null,
          quantity: ""
        }
      ]
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
    this.toggleHie = this.toggleHie.bind(this);
  }

  async onChange(event) {
    await this.setState({
      [event.target.name]: event.target.value
    });
    console.log(this.state);
  }

  handleSubmit(e) {
    let authToken = localStorage.getItem("Token");
    e.preventDefault();
    const data = {
      title: this.state.title,
      lead: this.state.lead,
      span: this.state.span,
      startDate: this.state.startDate,
      endDate: this.state.endDate,
      parameter: this.state.parameter,
      prizes: [
        this.state.prizes.map(c => {
          c.number_list = c.number_list;
          c.prize_type = c.prize_type;
          c.name = c.name;
          c.value = c.value;
          c.quantity = c.quantity;
        })
      ]
    };

    axios({
      method: "post",
      url: `https://digitalfleet.eu/api/1/campaigns/`,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + JSON.parse(authToken)
      },

      data
    })
      .then(res => {
        this.setState({
          title: "",
          lead: "",
          span: "",
          startDate: "",
          endDate: "",
          parameter: "",
          prizes: [
            {
              number_list: [],
              prize_type: "",
              name: "",
              value: null,
              quantity: ""
            }
          ]
        });
        this.props.history.push("/createcampaign");
        Swal.fire({
          title: "Campaign",
          type: "success",
          text: " Added Successfully  !",
          showConfirmButton: false,
          timer: 2000
        });
      })
      .catch(err => {
        console.log(err);
        Swal.fire({
          title: "Campaign",
          type: "error",
          text: "Error while Creating new!",
          timer: 2000
        });
      });
  }

Answer 1

Javascript map возвращает массив, поэтому вам не нужно определять data.prizes как массив, как вы.

Можете ли вы построить свой объект данных таким образом и попробовать?

const {title, lead, span, startDate, endDate, parameter, prizes} = this.state;

const data = {title, lead, span, startDate, endDate, parameter, prizes};

Answer 2

Следуя вашему текущему подходу, return is missing inside map, что может привести к тому, что значения не придут. Чтобы код работал, нужно выполнить следующие 2 действия. вернитесь с карты правильно и используйте оператор распространения , иначе значение будет go внутри приза [0] вместо массива призов.

Код будет:

prizes: [...this.state.prizes.map(c => ({ //Note '(' bracket before '{' for returning object
  c.number_list = c.number_list;
  c.prize_type = c.prize_type;
  c.name = c.name;
  c.value = c.value;
  c.quantity = c.quantity;
}))]

---

Однако , также существует упрощенная версия, если ваши значения данных эквивалентны this.state. Вы можете просто сделать следующее, и любое другое значение будет отлично работать:

data = { ...this.state }

Даже для призов вы можете просто сделать следующее:

data = {
  ...
  prizes: [ ...this.state.prizes ]
}

---

Пример фрагмента, демонстрирующий все выше (включая ваш текущий подход):

const state = {
  title: "title prize",
  lead: "lead prize",
  span: "span prize",
  prizes: [{
    prize_type: "type1",
    name: "Type 1"
  }, {
    prize_type: "type2",
    name: "Type 2"
  }]
}

const data1 = { ...state }
const data2 = {
  title: state.title,
  lead: state.lead,
  span: state.span,
  prizes: [...state.prizes]
}
const data3 = {
  title: state.title,
  lead: state.lead,
  span: state.span,
  prizes: [...state.prizes.map(c => ({
    prize_type: c.prize_type,
    name: c.name,
  }))]
}
console.log(data1)
console.log(data2)
console.log("Your approach")
console.log(data3)

.as-console-wrapper {
  top: 0;
  max-height: 250px !important;
}

Answer 3

Вы можете напрямую использовать это

const {title, lead, span, startDate, endDate, parameter, prizes} = this.state;
const data = { title, lead, span, startDate, endDate, parameter, prizes }

Answer 4

В вашей функции handleSubmit. Создайте объект data так:

const data = {
      title: this.state.title,
      lead: this.state.lead,
      span: this.state.span,
      startDate: this.state.startDate,
      endDate: this.state.endDate,
      parameter: this.state.parameter,
      prizes: [
        ...this.state.prizes
      ]
}