从 JSON 在 React 中渲染答案

【问题标题】：Rendering in React from JSON从 JSON 在 React 中渲染
【发布时间】：2017-10-23 19:27:13
【问题描述】：

我的应用程序中有一个小错误，无法修复。我需要从 JSON 渲染图像。首先，我有好几张专辑：

相册布局

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link, browserHistory } from 'react-router';


class AlbumLayout extends Component {
        handleClick(album){
            browserHistory.push({
                pathname: "album/" + album.id,
                state: {albumDetails: album}
            });
    }

    renderList(){

        return this.props.albums.map((album) => {
            return(

                <li onClick={this.handleClick.bind(this, album)} key={album.id}>                 
                        <img alt="job" src={album.img} />
                        <p className="album_titulo">{album.title}</p>
                </li>

            );
        });
    }


    render(){

        return (

            <div>
                <div className="albums">
                    <div className="albums_caixa">
                        <div className="row">
                            <div className="col-xs-12">
                                <ul className="no_pad">
                                    {this.renderList()}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}


function mapStateToProps(state){

    return {

        albums: state.album

    };
}



export default connect(mapStateToProps)(AlbumLayout);

每个相册都有自己的图片列表：

图片列表

import React, { Component } from 'react';
import { connect } from 'react-redux';

class AlbumsShow extends Component {


    renderImage(mainData, imageIdx){
        let jobDetails = this.props.albums.filter( t => t.id == this.props.params.id)[0];
        return (
                <div key={imageIdx} className='content'>
                  {mainData.images.map((image, etag) => {
                  return(
                      <div key={image.etag} className='content_box'>
                        <img key={image.etag} src={image.images.smallThumbnail} alt="book"/>
                      </div>
                      )
                  })}
                </div>
            )
    }


    render(){
    return (
      <div>
        {this.props.image.map(this.renderImage)}
      </div>
    );
  }

}

function mapStateToProps({image}) {
  return {image};
}

export default connect(mapStateToProps)(AlbumsShow);

当用户点击任何相册时，他应该会看到从 JSON 解析的图像列表。

{
    "images": {
        "id": "01",
        "etag": "01",
        "images": {
          "kind": "image",
          "id": "1",
          "etag": "1",
          "smallThumbnail": "http://books.google.com/books/content?id=FaaQgVCaXU4C&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"
        }
      }
  }

对于我来说，我在 图像列表-文件中有错误，但我找不到它。我将非常感谢您的帮助。

谢谢！

【问题讨论】：

嗯，你在哪里使用 jobDetails #renderImage
您也可以尝试使用.find 而不是.filter(x => x.id = params.id)[0] Docs Available Here
@RobWilkinson，实际上我认为这里不需要 jobDetails。我写了它，因为我试图从 reducer 添加图像，这是可行的，但后来我决定将所有图像都放入 JSON：render(){ let jobDetails = this.props.trabalhos.filter( t => t.id == this.props.params.id)[0]; return ( <div> <img src={jobDetails.img} /> </div> ); }
您是否正在尝试映射对象？还是两个图像值实际上都是对象数组？

标签： json reactjs redux react-router

【解决方案1】：

我认为您可能只需要在您的 .map 函数中绑定 this 上下文：

return (
  <div>
    {this.props.image.map(this.renderImage.bind(this))}
  </div>
);

您可能还需要在该组件的连接中添加albums。

【讨论】：

idk 如果它有所作为 - 但你也可以在构造函数中绑定到 this。