Javascript 添加多个id'；s到url

在我的react应用程序中，我有一个标签输入和一个标签列表，每个标签都有一个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);
      });
  }

---

旧标记将被删除，因为您一直在创建新的url。 您可以通过使用现有url继续附加标记，确保url是最新的，或者将所有标记一起附加，例如：

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();
..
}

问题是

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

您正在分配一个名为

tags

的URL参数，但对于单个值，只能执行一次。您可以使用逗号分隔，但是您需要使用

useState

回调来实现分配状态的异步性质，因为您不能假设调用

setState

后将更新

this.state.tags

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 };
});