Question

我正在尝试通过api调用渲染图像。我有两个反应组件，我相信我非常接近获取图像，但在我的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>
    );
  }
}

艺术家组成部分：

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

我假设您通过API调用从服务器获取this.state.selectedArtist.img_url？ React尝试在响应返回之前呈现组件，因此img_url未定义。您需要设置默认值或为此集成条件语句。

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

此外，在您的Artist组件中，您在let内定义handleArtistImg()，这意味着无法在该方法之外访问它。 const img_url = this.props.img_url;和const artistOnClick = this.artistOnClick;未定义，因为您尝试在React组件外部访问this。将其添加到constructor或使用state进行此操作。

获取错误无法读取未定义的属性

1 个答案: