レデューサーから反応するレンダリング

Question

おはよう。配列から要素を描画する際にいくつか問題があります。 は、私がページコンポーネントリストに、この要素を表示する必要がある - のimg ALT =「仕事」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コンポーネントを使用して相対情報を表示する必要があります。