Добавление нескольких идентификаторов в URL

Question

В моем приложении реакции у меня есть входные данные тегов и список тегов, у каждого тега есть идентификатор, и я делаю, когда пользователь выбирает любой из тегов, которые я беру, его идентификатор и добавляю в 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

Проблема в

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

Вы назначаете параметр URL с именем tags, но вы можете сделать это только один раз для одного значения. Вы можете разделить это запятыми, однако вам нужно будет использовать обратный вызов useState для асинхронного характера назначения состояния, поскольку вы не можете предполагать, что 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 };
});

Answer 2

Старый тег удаляется, потому что вы продолжаете создавать новый 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();
..
}