从 reducer 渲染到 React答案

【问题标题】：Rendering to React from reducers从 reducer 渲染到 React
【发布时间】：2017-10-24 02:50:04
【问题描述】：

晚上好。我在从数组中渲染元素时遇到了一些问题。我需要在页面 Component List - 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);

减速器

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

    ];

}

非常感谢您的帮助！

【问题讨论】：

错误是什么？
@AndrewLi，无法读取未定义的属性“地图”。
您是否尝试过在mapStateToProps 中记录状态以验证它是否正确映射到道具？此外，您的 map 似乎关闭了。回调的第一个参数是图片，第二个是当前索引。
@AndrewLi，我在我的问题中添加了“组件布局”。在这个组件映射工作中:(
我认为你需要将这个添加到构造函数中：this.renderList = this.renderList.bind(this)

标签： javascript arrays reactjs reducers

【解决方案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 参数不正确，我也在 sn-p 中进行了更正。

我刚刚注意到您的状态存在一些错误，这里我们有一个数组，但是您可以像访问对象一样在组件中访问它，为了清楚起见，我将进行简化。这里有一些问题，这种状态有一个令人困惑的结构，有些相册有图像有些没有，所以你将无法访问这些相册的图像，在你的组件中你试图访问一个数组的字段，这是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 数组，每个专辑对象都有相同的结构和相同的字段，这对于保持一致性和避免访问不存在的字段至关重要。 p>

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

【讨论】：

我将您的编辑粘贴到我的代码中，但仍然出现错误“无法读取未定义的属性 'map'”。
我发现另一个问题，让我添加另一个编辑，啊，对不起，我们会一起解决这个问题，别担心！
我希望！ :) 谢谢！
谢谢！现在我将尝试循环浏览每张专辑，因为这对我来说也是挑战:)
例如，我知道我对专辑元素 id 的“方式”是这样的：album.albums['0'].id，但我不知道我该怎么做它带有循环。