javascript - 从reducers渲染到React

Question

晚上好。我在渲染数组元素时遇到一些问题。我需要在页面组件列表 - img alt="job"src={image.img} 上显示此元素，但现在我的控制台向我显示错误，我认为这是 .map 内部的问题。所有源都与reducer连接。

组件列表

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

class AlbumsShow extends Component {

   renderImage(){
        return this.props.images.map((id, image) => {
            return(
                <li key={image.id}>                 
                        <img alt="job" src={image.img} />
                        <p className="album_titulo">Test</p>
                </li>
            );
        });
    }

    render(){
        return (

            <div>                
                {this.renderImage()}
            </div>

        );
    }
}

function mapStateToProps(state){
    return {
        images: state.image
  };
}
export default connect(mapStateToProps)(AlbumsShow);

组件布局

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { 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-md-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);

reducer

export default function() {

    return [

        { id: 1, 
         title: 'Album First',  
         img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg',
         images: [      
                    { id: 1, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 2, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 3, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 4, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 5, img: 'https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg'},
                    { id: 6, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 7, img: 'https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg'},
                    { id: 8, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 9, img: 'https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg'},
                    { id: 10, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
                    { id: 11, img: 'https://s-media-cache-ak0.pinimg.com/564x/ac/53/81/ac538106cc0430926af9b1fbcc761f04.jpg'},
                    { id: 12, img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'}
         ]
    },
        { id: 2, title: 'Album Second', img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'},
        { id: 3, title: 'Album Second', img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'}

    ];

}

我将非常感谢您的帮助!

Answer 1

我认为您只是有一个拼写错误，在您的状态中您有images，但随后您在不存在的组件内访问state.image。

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

class AlbumsShow extends Component {
   constructor(props) {
     super(props);
     this.renderImage = this.renderImage.bind(this);
   }

   renderImage(){
        return this.props.images.map(image => {
            return(
                <li key={image.id}>                 
                  <img alt="job" src={image.img} />
                  <p className="album_titulo">Test</p>
                </li>
            );
        });
    }

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

function mapStateToProps(state){
    return {
      // images: state.image WRONG
      // images: state.images WRONG WITH THE UPDATED STATE
     images: state.albums[0].images
    };
}
export default connect(mapStateToProps)(AlbumsShow);

此外，您错误地使用了 map 的参数，我还在代码片段中进行了更正。

我刚刚注意到您的状态有一些错误，这里我们有一个数组，但您可以像对象一样在组件中访问它，为了清楚起见，我将进行简化。这里有一些问题，这种状态的结构令人困惑，有些相册有图像，有些没有，所以您将无法访问这些相册的图像，在您的组件中您试图访问数组的字段，这是未定义。您应该清楚地了解您想要如何构建您的状态。

export default function() {

    return [
     { id: 1, 
       title: 'Album First',  
       img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg',
       images: [      
         { id: 1, img: 'someUrl'},
         { id: 2, img: 'someOhterUrl'},         
       ]
      },
      { id: 2,
        title: 'Album Second',
        img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'
      },
      { id: 3,
        title: 'Album Second',
        img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg'
      }
    ];

}

我个人会拥有这样的状态:

{
   albums: [
     {
       id: 1,
       title: 'Album First',  
       img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg',
       images: [      
         { id: 1, img: 'someUrl'},
         { id: 2, img: 'someOhterUrl'},         
       ]
     },
     {
       id: 2,
       title: 'Album Second',
       img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg',
       images: []
    },
    {
      id: 3,
      title: 'Album Second',
      img: 'https://s-media-cache-ak0.pinimg.com/564x/cb/9d/4a/cb9d4a0d055dd73eee404369e8cead2a.jpg',
      images: []
    }
  ]
}

注意到我做了什么吗？现在它更有意义了，您有一个专辑数组，并且每个专辑对象具有相同的结构和相同的字段，这对于保持一致性并避免访问不这样做的字段至关重要不存在。

我更新了组件，但请记住，我永远不会访问数组的特定项目，您应该循环遍历每个专辑，然后使用 AlbumShow 组件显示相关信息。