javascript - react 组件内的 map 功能

Question

我正在尝试在我的 ContentItem 组件中应用 map 功能。ContentItem 从 Content 组件接收 props 并且是一个带有数据的 slider ，为此我使用 lodash 来获取要传递的信息。我只得到很多行，内容相同。

这是我的代码:

内容.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>

}

这是结果...

Answer 1

你在这个字符串中有一个硬编码的图像源

<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>
  }
}

component-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>

}