如何在react中以对象数组的形式提交数据

Question

我是一个新的反应，所以这可能是一个非常愚蠢的问题，但我就是不能得到它。我有一个表单，它有一个多选择(导入的react- select )，当我选择多个选项时，我想把它作为一个对象数组发送。相反，我将其作为对象数组的数组发送。我希望帮助将其作为对象数组发送，而不是对象数组的数组。

import React from "react"
import Select from 'react-select'

class Skills extends React.Component{
    state = {
        skill: []
    }

  skillsDropdown = [
    { value: 'React', label: 'React' },
    { value: 'Vue', label: 'Vue' },
    { value: 'Angular', label: 'Angular' },
    { value: 'Java', label: 'Java' },
  ]
    handleChangeSkills = skill => {
        this.setState({
            skill
        })
        console.log(skill);
    }

    handleSubmit = (event) => {
        event.preventDefault();
        const userSkill= {
            skills: this.state.skill.map((item) => [{
                 skillName: item.value
            }])  
        }
       axios.post("http://localhost:8080/api", userSkill)
            .then(response => {
                console.log("User profile details from backend: ", response.data);
            })
       
    }

      render(){
        return (
            <>
                <h2>Skills</h2>
                <label>Please include 3-5 of your top skills to help you stand out.</label>
                <label>
                <Select 
                    options={this.state.skillsDropdown} 
                    onChange={this.handleChangeSkills}
                    isMulti=true
                    value={skill}
                />
                </label>
                    
                <button className="Next" onSubmit={this.handleSubmit}>Submit</button>
            </>
        )
    }

}

export default Skills;

当我提交数据时，我得到的是

skills: [[{skillName: "React"}], [{skillName: "Vue"}]]

我想要的是这个

skills: [{skillName: "React"}, {skillName: "Vue"}]

有没有人能帮我。提亚

Answer 1

罪魁祸首在您的map函数中。Map自动将其所有结果添加到一个数组中，而您在它周围添加了另一个数组。

const userSkill= {
                                               // culprit here
            skills: this.state.skill.map((item) => [{
                 skillName: item.value
            }])  
        }

移除[]可以修复此问题。

const userSkill= {                         
            skills: this.state.skill.map((item) => ({
                 skillName: item.value
            }))  
        }