React Props在确认页面中未正确显示信息

Question

我正在React中设计一个具有主表单生成器（（Create Job.js））和一些表单页面（AdditionalInfo.js）和（Confirmation.js）的表单。此表单具有标签输入，可让您从API提供的下拉列表中选择标签。所选项目需要稍后在确认页面中显示。

这是我的主要表单生成器，具有道具和功能：（（CreateJob.js）

state = {
    step:1,
    Title:'',
    requirements:'',
    Location:'',
    Benefits:'',
    Company:'',
    InternalCode:'',
    Details:'',
    Tags:[],
    Address:'',
    Department:'',
    Salary:''
  }
handleDropDown = input => value => {
  this.setState({ [input]: value }); 
}
  render () {
    const { step } = this.state
    const {Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Location } = this.state;
    const values ={Title,Benefits,Company,InternalCode,Detailss,Tags,Address,Department,Salary,requirements,Location}


    return (
      <div>
....
           <AdditionalInfo
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                handleChangeRaw={this.handleChangeRaw}
                handleDropDown={this.handleDropDown}
                values={values}
                />
           <Confirmation
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                values={values}
                />
....

这是我的表单页面，其中包括API的列表以及使用react-select（AdditionalInfo.js）的下拉列表：

export class AdditionalInfo extends Component {
  state = {
    locations:[],
    departments: [],
    tagsList:[],
  }

  componentDidMount() {
  axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
      console.log(respo.data)
      this.setState({
        tagsList:respo.data.map(Tags=>({label: Tags.name, value: Tags.id}))
      })
      console.log(this.state.tagsList)
    })
  }
render() {
  const {values, handleDropDown} = this.props

 <Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required isMulti options={this.state.tagsList}/>
...

这是从API接收的标签列表：

Object { label: "MongoDB", value: 1 }
​
Object { label: "JavaScript", value: 2 }
​
Object { label: "HTML", value: 3 }
​
Object { label: "CSS", value: 4 }
...

这是我的确认页面，该页面需要显示从先前页面收到的信息（（Confirmation.js）

.....
render () {
    const {
      values: {
        Title, Benefits,
        Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Location
      }} = this.props
<Row> Tags: {Tags.join(", ")}</Row>
....

问题是，与其在页面上显示标签，不如将标签彼此相邻：JavaScript，MongoDB，...它显示了这一点：[对象对象]，[对象对象]，[对象对象]，[对象对象]。很抱歉，我的代码很长，但是我是JavaScript的初学者，我不知道如何处理它，因此它会显示标签。我该如何实现？

Answer 1

像这样使用它-

import React from 'react';

const Confirmation = () => {
  const tags = [ // which you got from props
    { label: "MongoDB", value: 1 },
    { label: "JavaScript", value: 2 },
    { label: "HTML", value: 3 },
    { label: "CSS", value: 4 }
  ];

  return (
    <div>
      {tags.map(tag => tag.label).join(', ')}
    </div>
  );
}

export default Confirmation;