戻ってくるエラーが未定義のプロパティを読み取ることができません

Question

私は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> 
    ) 
    } 
} 

Answer 1

？ 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を使用してください。