다시 가져 오기 오류가 정의되지 않은 속성을 읽을 수 없습니다.

API 호출을 통해 이미지를 렌더링하려고합니다. 나는 2 개의 반응 요소를 가지고 있는데 이미지를 렌더링하는 데 상당히 가깝지만 내 artist.jsx에서는 정의되지 않은 오류가 다시 발생하고 그 이유를 알 수 없습니다. 다음은 두 구성 요소의 코드입니다.다시 가져 오기 오류가 정의되지 않은 속성을 읽을 수 없습니다.

응용 프로그램 구성 요소 :

artistOnClick(e) { 
    let artist = e.target.innerHTML; 
    this.getSubsequentCollabs(artist); 
    } 

    render() { 
    const img_url = this.state.selectedArtist.img_url; 
    const { artistCounts } = this.state; 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <input type='text' name="searchInput" className="searchInput" placeholder="Search Artist" onChange={this.handleChange} /> 
      <input type="submit" className="button" /> 
     </form> 
     <img alt="" className="artist-img" src={this.state.selectedArtist.img_url} /> 
     <div id="collabs"> 
      { 
       Object.keys(artistCounts).map((artist) => { 
       return (
        <Artist 
        name={artist} 
        image={img_url} 
        artistOnClick={this.artistOnClick} 
        /> 
       ) 
       }) 
      } 
     </div> 
     </div> 
    ); 
    } 
}

아티스트 구성 요소 : 나는 당신이 API 호출을 통해 서버에서 this.state.selectedArtist.img_url을 받고 가정입니다

const propTypes = { 
    artistOnClick: React.PropTypes.func.isRequired, 
}; 

const artistOnClick = this.artistOnClick; 
const img_url = this.props.img_url; 


export default class Artist extends React.Component ({name, img_url}) { 
    constructor(props) { 
    super(props); 
    this.handleArtistImg = this.handleArtistImg.bind(this); 
    } 



    handleArtistImg(id) { 
    request.get(`api`) 
    .then((response) => { 
     const artist = response.body.artists.items[0].images[0].url; 
     let img_url = artist.images[0].url; 
    }) 
    } 

    render() { 
    return (
     <div> 
     <div onClick={artistOnClick}> 
     <h1>{name}</h1> 
     <div onClick={this.handleArtistImg}> 
      <img src={img_url} /> 
     </div> 
     </div> 
     <div onClick={this.handleArtistImg}></div> 
     </div> 
    ) 
    } 
}

출처

2016-11-06 Mshark

두 파일 코드를 모두 제공하십시오. 어쨌든 – FurkanO

을 통해 비공개로 보냅니 까? – Mshark

흠 나는 그것을하는 방법에 대해 전혀 몰라. github에 코드가 있습니까? – FurkanO

? React는 응답이 돌아 오기 전에 구성 요소를 렌더링하려고하므로 img_url은 정의되지 않습니다. 기본값을 설정하거나 이에 대한 조건문을 통합해야합니다.

<img alt="" className="artist-img" src={this.state.selectedArtist ? this.state.selectedArtist.img_url : '/fallback.png'} />

또한, 아티스트 구성 요소에서 당신은 그 방법 밖에 액세스 할 수 없습니다 의미 handleArtistImg() 내부 let을 정의하고 있습니다. React 구성 요소 외부에서 this에 액세스하려고 시도했기 때문에 const img_url = this.props.img_url; 및 const artistOnClick = this.artistOnClick;은 정의되지 않았습니다. 이 경우 constructor에 넣거나 state을 사용하십시오.

출처

2016-11-06 16:29:23

다시 가져 오기 오류가 정의되지 않은 속성을 읽을 수 없습니다.

답변

관련 문제