向 url 添加多個 id

Question

在我的反應應用程序中，我有一個標簽輸入和一個標簽列表，每個標簽都有一個 id，我正在做的是當用戶選擇任何標簽時，我將其作為 id 並將其添加到 url 作為參數，問題是我想多次使用這個參數，但我面臨的問題是當我添加一個新參數時，舊參數會被刪除，這里是代碼：

handleAddition(tag) {
    this.setState(state => ({ tags: [...state.tags, tag] }));

    let url = new URL('https://myapp.com/subjects');
    url.searchParams.append("tags", `${tag.id}`);
    let requestUrl = url.toString();

    axios
      .get(`${requestUrl}`, { headers })
      .then(response => {
        console.log(success)
      })
      .catch(error => {
        console.log(error);
      });
  }

Answer 1

舊標簽被刪除，因為您不斷創建新的 url。 您可以通過使用現有的 url 繼續附加標簽來做到這一點，確保 url 是最新的或 append 所有標簽，例如：

handleAddition(tag) {
    this.setState(state => ({ tags: [...state.tags, tag] }));

    let url = new URL('https://myapp.com/subjects');
    this.state.tags.forEach(tag => {
    url.searchParams.append("tags", `${url.searchParams.get('tags')}, ${tag.id}`);
    }
    let requestUrl = url.toString();
..
}

Answer 2

問題是

let url = new URL('https://myapp.com/subjects');
url.searchParams.append("tags", `${tag.id}`);

您正在分配一個稱為tags的 URL 參數，但您只能為單個值執行此操作一次。 您可以用逗號分隔它，但是您需要使用useState回調來分配 state 的異步性質，因為您不能假設this.state.tags將在調用setState后更新。

this.setState(state => {
   const tags = [...state.tags, tag];

   let url = new URL('https://myapp.com/subjects');
   url.searchParams.append("tags", tags.join(','));
   let requestUrl = url.toString();

   axios
     .get(requestUrl, { headers })
     .then(response => {
        console.log(success)
     })
     .catch(error => {
       console.log(error);
     });

   return { tags };
});