React Props не отображает информацию на странице подтверждения - PullRequest
Новая
       84

React Props не отображает информацию на странице подтверждения

0 голосов
/ 03 мая 2020

Я разрабатываю форму в React, в которой есть основной конструктор форм (Создать задание. js) и некоторые страницы формы (Дополнительная информация. js) и (подтверждение. 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 и раскрывающегося списка с помощьюact-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 }
...

И это Моя страница подтверждения, на которой необходимо отобразить информацию, полученную с предыдущих страниц (Подтверждение. js) 

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

, проблема заключается в том, что вместо отображения тегов на странице, таких как размещение метки рядом друг с другом: JavaScript, MongoDB, ... это показывает это: [объект объекта], [объект объекта], [объект объекта], [объект объекта]. извините за длинный код, но я новичок в JavaScript, и я не знаю, как с этим справиться, чтобы он показывал метки. Как мне этого добиться?

1 Ответ

1 голос
/ 03 мая 2020

У вас все отлично, и вы все сделали правильно, просто вам нужна простая настройка. Если React показывает что-то вроде [Object Object], это означает, что вы пытаетесь отобразить Javascript Object не единственное значение, потому что вы получили Tags из props, который является 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;
...