Question

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

此外，你错误地使用了地图的参数，我也在片段中进行了修正。

我刚注意到你的状态有一些错误，这里我们有一个数组，但是你在组件中访问它就像一个对象，为简洁起见，我会简化。这里有一些问题，这个状态有一个令人困惑的结构，一些专辑有一些没有的图像，所以你将无法访问那些专辑的图像，在你试图访问阵列的一个字段的组件中，这是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

1 个答案: