将多个 id 添加到 url答案

【问题标题】：Adding multiple id's to url将多个 id 添加到 url
【发布时间】：2019-11-08 19:10:26
【问题描述】：

在我的 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);
      });
  }

【问题讨论】：

标签： javascript reactjs url parameters

【解决方案1】：

旧标签被删除，因为您不断创建新网址。您可以通过在现有 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();
..
}

【讨论】：

【解决方案2】：

问题是

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

您正在分配一个名为 tags 的 URL 参数，但您只能为单个值执行此操作一次。您可以用逗号分隔它，但是您需要使用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 };
});

【讨论】：