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

Question

我正在用 React 做一个项目。这个想法是，当您搜索艺术家时，将在 pg 上渲染 img。单击图像后，将呈现合作艺术家列表。然后，您可以单击一个名称并查看与艺术家合作的人。这是我的问题：不是每次单击新艺术家时状态 clearing/resetting，新艺术家只是添加到原始状态。有人可以帮我弄清楚如何清除状态，以便清除状态并 returns 一个新的协作者列表吗？坚持了几个小时。这是代码

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> 之类的新组件，它应该将艺术家作为道具，并使用其自己的渲染方法将此处的代码渲染到 DOM 中。

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

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

I am trying to reset the state to an empty object after every onClick occurs

state

object

setstate

reactjs