감속기에서 반응하는 렌더링

Question

안녕하세요. 배열 요소를 렌더링 할 때 몇 가지 문제가 있습니다. 나는 페이지에이 요소 구성 요소 목록 보여줄 필요가 - 의 img 고도 = "작업"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 구성 요소를 사용하여 관련 정보를 표시해야합니다.