Question

在我的react应用程序中，我有一个标签输入和一个标签列表，每个标签都有一个ID，而我正在做的是当用户选择我要使用的任何标签并将其添加到url中时作为一个参数，问题是我想多次拥有此参数，但是我面临的问题是当我添加一个新参数时，旧参数被删除了，这是代码：

<li *ngFor="let child of nestedjson; let i = index"><input type="checkbox" checked>{{child.name}}</li>
<div><button (click)="clear()" type="submit">clear</button></div>

Answer 1

由于您继续创建新的网址，因此旧标记被删除。您可以通过以下方式执行此操作：要么将标签与现有网址一起追加，确保该网址是最新网址，要么将所有标签全部追加，例如：

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回调来分配状态的异步性质，因为您不能假定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 };
});

在网址中添加多个ID

2 个答案: