Question

我正在React的一个项目上工作。这个想法是当你在pg上搜索艺术家的img渲染时。单击图像后，将呈现协作艺术家列表。然后，您可以单击一个名称，然后查看人员合作艺术家。这是我的问题：每次点击新艺术家时，不是状态清除/重置，而是新艺术家只是添加到原始状态。有人可以帮我弄清楚如何清除状态，以便状态清除并返回一个新的协作者列表？被困在这几个小时。这是代码

searchForArtist(query) {
    request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`)
      .then((response) => {
        const artist = response.body.artists.items[0];
        const name = artist.name;
        const id = artist.id;
        const img_url = artist.images[0].url;
        this.setState({
          selectedArtist: {
            name,
            id,
            img_url,
          },
        });
      })
      .then(() => {
        this.getArtistAlbums();
      })
      .catch((err) => {
        console.error(err);
      });
  }

  getArtistCollabs() {
    console.log('reached get artist collab function');
    const { artistCounts } = this.state;
    // console.log(artistCounts);
    const artist = Object.keys(artistCounts).map((key) => {
       //kate
      const i = document.createElement("div");
      i.innerHTML = key;
      i.addEventListener('click', () => {
        this.searchForArtist(key);
      })
      document.getElementById("collabs").appendChild(i);
    });
    this.setState({});
  }
  //kate
  renderArtists() {
    const artists = this.getArtistCollabs();
  }


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

Answer 1

你的问题就在这里：

const artist = Object.keys(artistCounts).map((key) => {
  //kate
  const i = document.createElement("div");
  i.innerHTML = key;
  i.addEventListener('click', () => {
    this.searchForArtist(key);
  })
  document.getElementById("collabs").appendChild(i);

你在这里做的是手动创建html元素并将它们插入到dom中。一旦发生这种情况，反应就无法控制这些新创建的元素。你应该只在绝对必要时操纵这样的DOM。相反，你应该制作一个名为<ArtistCollaborators＆gt;的新组件。它应该把艺术家作为道具，并使用自己的渲染方法将你在这里的代码渲染到DOM中。

这将是React的做法，并允许您完全控制渲染到DOM中的内容。

我想在每次onClick发生后将状态重置为空对象

1 个答案: