javascript - React Props 在确认页面中无法正确显示信息

Question

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

这是我的主要表单构建器，具有 Prop 和功能:(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

你做得很好，而且做得对，只需简单的调整即可。如果 React 显示类似 [Object Object] 的内容，则意味着您正在尝试渲染 Javascript Object 而不是单个值，因为您已获得 来自 props 的标签，它是一个对象数组。

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

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;