我想在每次onClick發生後將狀態重置爲空對象

我正在使用React中的項目。這個想法是，當你在頁面上搜索一個藝術家img渲染時。一旦你點擊圖像，就會呈現協作藝術家列表。然後你可以點擊一個名字，看看那些人協作藝術家。這是我的問題：每次點擊一位新藝術家時，並非每次清理/重置狀態，新藝術家都會添加到原始狀態。有人可以幫我弄清楚如何清除狀態，以便狀態清除並返回一個新的協作者列表？一直堅持了幾個小時。下面是代碼我想在每次onClick發生後將狀態重置爲空對象

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>

來源

2016-11-04 Mshark

你的問題就在這裏：

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中的代碼呈現到DOM中。

這將是React的做法，並且可以完全控制要渲染到DOM中的內容。

來源

2016-11-04 16:32:33 finalfreq

我想在每次onClick發生後將狀態重置爲空對象

回答

相關問題