尝试使用输入数据发送Id时反应获取错误

Question

尝试将数据发送到我的数据库时，我遇到了一些反应问题。

我有一个团队列表，我想将球员添加到某些球队。我正在尝试从他们添加播放器的特定团队发送用户输入和团队ID的玩家姓名和玩家编号。这是我添加玩家的功能：

  addPlayers() {
    var pname = document.getElementById("playerName").value;
    var pnr = document.getElementById('pnr').value;
    var teamId = document.getElementById('teamId').value;
    console.log(pname + pnr + teamId);
    fetch("http://localhost:8080/api/addPlayer?name="+pname+"&number="+pnr+"&teamId="+teamId);
 }

如果我硬编码播放器名称和号码或我硬编码teamID，这一切都有效。当试图动态获取所有3时，它不起作用。 console.log只返回团队ID，并且在尝试将玩家添加到其他团队时也不会更新。

反射渲染部分：

  this.state.data.map((dynamicData, key) =>
              <div class="black">
              <PanelGroup accordion id="accordion">
                <Panel bsStyle="primary" eventKey="1">
                  <Panel.Heading>
                    <Panel.Title toggle>{dynamicData.name} <i class="fas fa-angle-down"></i></Panel.Title>
                  </Panel.Heading>
                  <Panel.Body collapsible>Add players</Panel.Body>
                  <Panel.Body collapsible>
                  <div id="dynamicInput">
                    <input type="hidden" class="bottomroom" id="teamId" value={dynamicData.id}></input>
                    <input type="text" class="bottomroom" placeholder="Player name" id="playerName"></input>
                    <input type="text" class="bottomroom" placeholder="Player number" id="pnr"></input>
                  </div>
                    <br></br>
                    <button type="submit" onClick={this.addPlayers} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
                  </Panel.Body>
                </Panel>
              </PanelGroup>

Here is a picture of what it looks like to give you a better understanding

---

错误：

"Bad Request"
message
:
"Failed to convert value of type 'java.lang.String' to required type 'int'; nested exception is java.lang.NumberFormatException: For input string: """
path
:
"/api/addPlayer"
status
:
400
timestamp

Answer 1

通过查看错误，很明显该字段存在类型不匹配。

我将假设数字字段是int类型你可以尝试跟随或如果它的类型为int的teamid只是为teamid做这个

var pnr = parseInt(document.getElementById('pnr').value);

告诉我们它是否有效。

UPDATE

<input type="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
<input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>

按钮

 <button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>

并在功能

   addPlayers(key) {
    var pname = document.getElementById("playerName").value;
     var pnr = parseInt(document.getElementById('pnr').value);
    var teamId = document.getElementById('teamId').value;
    console.log(pname + pnr + teamId);
    fetch("http://localhost:8080/api/addPlayer?name="+pname+"&number="+pnr+"&teamId="+teamId);
 }