从 reducer 渲染到 React

Question

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

组件列表

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);

减速器

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 的参数，我也在代码段中进行了更正。

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

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: []
    }
  ]
}

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

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

从 reducer 渲染到 React

Rendering to React from reducers

javascript

arrays

reactjs

reducers