React Props 在确认页面中没有正确显示信息答案

【问题标题】：React Props doesnt show info properly in the confirmation pageReact Props 在确认页面中没有正确显示信息
【发布时间】：2020-05-03 12:27:22
【问题描述】：

我正在 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 的初学者，我不知道如何处理它，所以它显示了标签。我怎样才能做到这一点？

【问题讨论】：

标签： javascript reactjs axios react-props setstate

【解决方案1】：

你做得很好，你做得对，只是你需要的简单调整。如果React 显示类似[Object Object] 的任何内容，则意味着您正在尝试渲染Javascript Object 而不是单个值，因为您从props 获得了Tags，这是一个Array of objects。

像这样使用它，它会像黄油一样工作-

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(', ')} {/* map over tags to get the array of tag labels */}
    </div>
  );
}

export default Confirmation;

【讨论】：