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

Question

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

这是我的主要表单生成器，具有道具和功能：(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 获得了 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;

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

React Props doesnt show info properly in the confirmation page

javascript

setstate

reactjs

axios

react-props