функция карты внутри компонента реакции - PullRequest
Новая
       3

функция карты внутри компонента реакции

1 голос
/ 17 марта 2019

Я пытаюсь применить функцию карты внутри моего ContentItem компонента. ContentItem получает реквизиты от компонента Content и представляет собой слайдер с данными, для которого я использую lodash для получения передаваемой информации. Я получаю только много строк с одинаковым содержанием.

вот мой код:

content.js 

export default class Content extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      picture : []
    }
  }

  componentDidUpdate(){
    const elements = _
      .chain(this.props.contentInfo)
      .filter(item => item)
      .flatMap('data')
      .filter(item => item)
      .value()

    if (this.state.picture == '') {
      this.setState({picture: elements})
    }
  }

  render() {
    <section className="content-group-wide-item">
      <div className='news-rail-container col-xs-12 col-sm-12 col-md-12 col-lg-12'>
        <Slider {...settings}>
          {
            this.state.picture.map((element , index) => (
              <ContentGroupWidePicture key={index} contentPicture={this.state.picture}/>
            ))
          }
        </Slider>
      </div>
    </section>
  }
}

компонент-item.js 

export default function ContentItem({contentPicture}) {


     const elementos = _
      .chain(contentPicture)
      .map(item => _.pick(item, ['name', 'title', 'description']))
      .value()

      return (
        <React.Fragment>
                {
                elementos.map((element , index) => (
                <div className='content'>
                    <img alt='' src='https://dz92jh1unkapm.cloudfront.net/accounts/5bbcf78db827ce76aa82a6a0/uploads/railWide/5c754da1c8c1c50c88a2efc0-1551191457-w' className="img-responsive" />
                    <div className="info">
                            <div className="bottom">
                            <p className='news-title'>{element.name}</p>
                            <p className='news-subtitle'>Caption</p>
                        </div> 
                    </div>
                </div>
            ))
        }
    </React.Fragment>

}

это результат ... enter image description here

1 Ответ

1 голос
/ 17 марта 2019

В этой строке указан источник изображения с жестким кодом 

<img alt='' src='https://dz92jh1unkapm.cloudfront.net/accounts/5bbcf78db827ce76aa82a6a0/uploads/railWide/5c754da1c8c1c50c88a2efc0-1551191457-w' className="img-responsive" />

, поэтому при повторении вы получаете все одинаковые изображения.

Если вы хотите, чтобы он был динамическим, вы должны хранить ссылки на изображения в массиве picture и передавать его компоненту ContentItem.

Вот пример (я выделил измененные части):

content.js 

export default class Content extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      picture : []
    }
  }

  componentDidUpdate(){
    const elements = _
      .chain(this.props.contentInfo)
      .filter(item => item)
      .flatMap('data')
      .filter(item => item)
      .value()

    if (this.state.picture == '') {
      this.setState({picture: elements})
    }
  }

  render() {
    <section className="content-group-wide-item">
      <div className='news-rail-container col-xs-12 col-sm-12 col-md-12 col-lg-12'>
        <Slider {...settings}>
          {
            this.state.picture.map((element , index) => (
              <ContentGroupWidePicture key={index} contentPicture={element}/> 
              //                                                   ^ PASS actual picture from picture array
            ))
          }
        </Slider>
      </div>
    </section>
  }
}

компонент-item.js 

export default function ContentItem({contentPicture}) {


     const elementos = _
      .chain(contentPicture)
      .map(item => _.pick(item, ['name', 'title', 'description']))
      .value()

      return (
        <React.Fragment>
                {
                elementos.map((element , index) => (
                <div className='content'>
                    <img alt='' src={contentPicture} className="img-responsive" /> 
                    //               ^ USE received image url string as a src attribute 
                    <div className="info">
                            <div className="bottom">
                            <p className='news-title'>{element.name}</p>
                            <p className='news-subtitle'>Caption</p>
                        </div> 
                    </div>
                </div>
            ))
        }
    </React.Fragment>

}
...